01-angularJs入门

来源：互联网发布：淘宝体检中心登陆编辑：程序博客网时间：2024/06/04 20:08

AngularJS 基础入门

前言:AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

下载

CDN

<script src="https://cdn.bootcss.com/angular.js/2.0.0beta.17/angular2.min.js"></script>

官网下载地址

http://angularjs.org‘>官网地址:http://angularjs.org

使用步骤

–

导入angularJs文件路径
在想使用angularJs的区域使用ng-app声明所在区域为angularJS可使用的作用域。

例如

<html lang="en" ng-app="myApp">

以上代码声明了html包含的区域味angularJS的作用域

运算符

<h1>算术运算符</h1><ul>    <li>{{1+2}}</li>    <li>{{3-5}}</li>    <li>{{3*3}}</li>    <li>{{6/2}}</li>    <li>{{3%8}}</li></ul><h1>比较运算符</h1><ul>    <li>{{3>1}}</li>    <li>{{3>=1}}</li>    <li>{{3<1}}</li>    <li>{{3<=1}}</li>    <li>{{1=='1'}}</li>    <li>{{1!='1'}}</li>    <li>{{1==='1'}}</li>    <li>{{1!=='1'}}</li></ul><h1>赋值运算符</h1><ul>    <li>{{num=123}}</li>    <li>{{num}}</li></ul><h1>逻辑运算符</h1><ul>    <li>{{3>1 && 5>2}}</li>    <li>{{3<1|| 3<2}}</li>    <li>{{!1}}</li></ul><h1>三目运算符</h1><ul>    <li>{{3>1?'hello geek':'hello kgc'}}</li></ul>

模块的创建

–

//创建模块var app=angular.module('myApp',[]);//创建控制器app.controller('MyCtrl',function($scope){    $scope.username='张无忌';});

调用controller

<div ng-controller="MyCtrl">    <h1>Helo {{username}}</h1> </div>

control方法

–

 .controller('MyCtrl2',function($scope){          $scope.test='this is a test';          $scope.play=function(){              alert('playing...');          } })

调用方法

<div ng-controller="MyCtrl2">    <p><button ng-click="play()">clickMe</button></p>

$scope

例如:

app.controller('MyCtrl',function($scope){$scope.username='张无忌';});

scope代表了当前controller的一个作用域。我们声明属性和方法都需要在scope的基础上声明

$rootScope

例如:

app.controller('MyCtrl',function($scope,$rootScope){    $scope.username='张无忌';    $rootScope.username='谢逊';});

$rootScope可以在当前module中的所有controller使用。如果controller有重名的属性或方法。则会调用controller中的。

–

$watch

scope.watch(‘变量名’，function(newVal,oldVal))

检测指定变量名,当变量名发生变化。会触发function(新值,旧值)

–

$interval

$interval(func,1000);

定时函数

–

常用指令

ng-app:制定作用域

ng-init:初始化数据

ng-controller:指定所使用controller

ng-click:指定单击时间调用的函数

ng-model:指定绑定的变量名

如果建议请留言

0 0