AngularJS - 基础用法

模块

定义模块

// 模块名, 所依赖的模块
angular.module('appName', []);

加载模块

var app = angular.module('appName')

控制器

定义控制器

// 控制其名, [所依赖的模块名, 控制函数]
angular.module('appName', [])
　　.controller('controllerName', [function(){
}]);


// 没有所依赖模块的简单写法, 不太推荐这种方式
angular.module('appName', [])
　　.controller('controllerName', function(){
});

// angular 1.2 之前的版本
// 会像控制器中 注入 $scope 变量.
// 1.2 版本之后, 只要使用 this 关键字就能将变量定义成控制器的成员变量
angular.module('appName', [])
　　.controller('controllerName', [function(){
            this.v = '';
}]);

// 但是更好的习惯是, 在控制器内部使用代理变量来代理 this
angular.module('appName', [])
　　.controller('controllerName', [function(){
            var self = this;
            self.v = '';
}]);

指令

<div ng-app="">
     <p>姓名：<input type="text" ng-model="name"></p>
     <p ng-bind="name"></p>
</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

ng-switch-when & ng-if

<span ng-switch on="person.sex">
　　<span ng-switch-when="1">you are a boy</span>
　　<span ng-switch-when="2">you are a girl</span>
</span>

<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>

用法形式比较

<div ng-app="myApp" ng-controller="myCtrl">
    1.<span ng-if="IsDone==2"> 2 </span> <br/>   <!-- success -->
    2.<span ng-if="{{IsDone==2}}"> 2 </span> <br/> <!-- error -->
    3.<span ng-if={{IsDone==2}}> 2 </span> <br/> <!-- error -->
</div>

表达式

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>

{{}}表达式, ng-bind, ng-model 的区别

ng-bind : 只适用于单向绑定, 用于 scope 到 HTML 的输出

ng-model : 适用于双向绑定, 用于 HTML(input) 到 scope 的输出

{{}} 表达式则都适合

<div ng-app="myApp" ng-controller="myCtrl">
    1. <span ng-bind="people"></span>   <!-- success -->
    2. <span ng-model="people"></span>    <!-- error -->
    3. <span> {{ people }} </span>        <!-- success -->
    <hr />
    1. <input type="text" ng-bind="people" />      <!-- error -->
    2. <input type="text" ng-model="people" />      <!-- success -->
    3. <input type="text" value="{{ people }}" /> <!-- success -->
    <hr />
    {{ people }}    <!-- success -->
    <hr />
</div>

注意:

如果仅仅是单向绑定的话, {} 会需要时间被解析成 ng-bind 所以直接用 ng-bind 会比较快.

控制器

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

有时候在控制器内部更新 scope 变量但是无法立即生效

则需要使用 $scope.$apply(); 来使变量立即同步。

这是因为 scope 上下文所处的域不同而导致的。

如何在外部引用 $scope 变量

var app = angular.module('bidsetApp', []);
app.controller('bidsetController', function($scope) {
    $scope.loadSet = function(){}
});

var element = angular.element(document.getElementById("divapp"));
var controller = element.controller();
var scope = element.scope();
scope.loadSet();

获取 ng-repeat 中的对象

ng-repeat-start ng-repeat-end

<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <ul>
          <li ng-repeat="x in names">
              <button value="x.country" ng-click="c()"> {{ x.name }}</button>
          </li>
        </ul>
    </div>
</body>
<script>
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Hege',country:'Sweden'},
            {name:'Kai',country:'Denmark'}
        ];
        $scope.c = function(){
            alert(this.x.name)
        }
    });
</script>


// 指定用于判断重复的属性
// 这样 angular 就可以重用 li 不会进行多余的刷新
<li ng-repeat="x in names track by x.Id"></li>

用于异步获取

$http({
    method : 'POST',
    params : { id:123}, 
    data:{name:'john',age:27},
    url : "/mypath"
})
.success(function(response, status, headers, config){
    //do anything what you want;
})
.error(function(response, status, headers, config){
    //do  anything what you want;
});

posted @ 2015-12-24 23:23 `Laimic 阅读(155) 评论(0) 收藏举报

刷新页面返回顶部