AngularJS基础知识

模块
- 　　AngularJS允许我们使用angular.module()方法来声明模块，这个方法接受两个参数，第一个是模块的名称，第二个参数是依赖列表，也就是可以被注入到模块中的对象列表。
- angular.module('myApp',[])
作用域（scope）
- 　　作用域（scope）是构成AngularJS应用的核心基础，是试图和控制器之间的胶水。
控制器

　　控制器在AngularJS中的作用是增强视图。AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外功能。我们用它来给作用域设置初始状态，并添加自定义行为。由于AngularJS会负责控制器的实例化过程，所以我们只需要编写构造函数即可。

function FirstController($scope){
  $scope.message = “hello”;    
}

　更合理的方式是创建一个模块，然后在模块中创建控制器。

var app = angular.module('app',[]);

app.controller('FisterController',function($scope)){
  $scope.messge = 'hello';  
}

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="Lib/Angular/angular.js"></script>
    <title></title>
</head>
<body>
    <div ng-controller="FirstController">
        <h4>The simplest adding macine</h4>
        <button ng-click="add(1)" class="button">add</button>
        <a ng-click="subtract(1)" class="button alert">Subtract</a>
        <h4>Current count:{{counter}}</h4>
    </div>
</body>
</html>
<script type="text/javascript">
    var app = angular.module('app', [])

    app.controller('FirstController', function ($scope) {
        $scope.counter = 0;
        $scope.add = function (amount) { $scope.counter += amount };
        $scope.subtract = function (amount) { $scope.counter -= amount };
    });
</script>

控制器嵌套（作用域包含作用域）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <script src="Lib/Angular/angular.js"></script>
    <title></title>
</head>
<body>
    <div ng-controller="ParentController">
        <div ng-controller="ChildController">
            <a ng-click="SayHello()">Say hello</a>
        </div>
        {{person}}
    </div>
</body>
</html>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('ParentController', function ($scope) {
        $scope.person = { greeted: false };
    });

    app.controller('ChildController', function ($scope) {
        $scope.SayHello = function () {
            $scope.person.name = 'Ari Lerner';
        };
    })
</script>

控制器应尽可能保持短小精悍，而在控制器中进行DOM操作和数据操作，则是一个不好的实践。设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务，我们可以将控制器重构成一个轻量级且更易维护的形式

    var app = angular.module('app', []);
    app.controller('MyController', function ($scope,UserSrv) {
        $scope.onLogin = function (user) {
            UserSrv.runLogin(user);
        };
    });

表达式

posted @ 2015-03-12 16:56 lvxin 阅读(150) 评论(0) 收藏举报

刷新页面返回顶部

AngularJS基础知识

公告