angular.js学习笔记--概念总结

好久没更新了，现在开始学习学习angularjs，并且把学习到的一些知识总结记录一下，方便以后查找以及希望能给初学者一些帮助！（由于本人也是初学ng所以各位慎重理解！）

废话不多说，开始！

$rootScope 和 $scope：

 

    $rootScope是angular中最接近全局作用域的对象，是所有$scope对象的最上层！

    $scope对象就是一个普通的js对象，我们可以在其上随意修改和添加属性，并且其在angular中充当数据模型，它是所有属性都可以自动呗视图访问到，但是它并不负责数据的处理和操作！

 

指令：将DOM元素增强为可复用的DOM组件的属性或元素

    ng-app指令规定了angular的作用域，如果没有该指令angular就不会运行，只有被具有ng-app属性的DOM元素包含的元素才 会受AngularJS影响。

    ng-model 该指令将输入框的值跟controller里的$scope model进行双向绑定，使用该指令实现数据绑定

    ng-init 该指令在程序运行前设定一个初始值 如：

    <b ng-init='name = "Ari Lerner"'>Hello, {{ name }}</b>

    ng-controller 该指令指定一个controller控制器，ng-controller声明所有被它包含的元素都属于某个控制器，并且该指令为这个DOM元素创建了一个新的$scope作用域，且将它嵌套在$rootScope内！

    ng-click 该指令给DOM元素注册一个点击事件监听器，可以在点击触发表达式的内容，也可以调用在controller中绑定在$scope上的函数

    ng-repeat 该指令遍历一个数据集中的每个元素，可以使用p in arr来变量数组或对象中的每个值，或者用(name, val) in object来遍历对象中的属性名和值

 

表达式：

          表达式一般是指{{}}中的部分        

• • • • 所有表达式都在scope这个context里被执行，因此可以使用所有本地 $scope 中的变量。

      • 如果一个表达式的执行导致类型错误或引用错误，这些错误将不会被抛出。

      • 表达式里不允许任何控制函数流程的功能（如if/else等条件语句）

      • 表达式可接受一个或多个串联起来的过滤器。

 

模块：

          使用angular.module()方法声明模块这个方法能够接受两个参数, 第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。

     angular.module(’name’, [ ])

 

注意：

          在angular中使用对象属性代替使用对象本身来进行数据绑定是最佳体验，如：

          在html中用{{test.nam}}替换{{name}},在controller里用$scope.test = {name: ‘value’}代替$scope.name = “value”;这里主要是用对象的引用传递来代替变量值传递

 

 

控制器：

         通过ng-controller指令在DOM中指定控制器，并且控制器之间是可以进行嵌套的，子控制器通过原型继承来继承父控制器中的属性，方法等！注意，在控制器中进行dom操作并不是好的实践，尽可能保持控制器的短小精悍！

app.controller('my', ['$scope', '$filter', function($scope, $filter) {
    $scope.test = {name : 11};
}])

过滤器：

         在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如：

         {{ name | uppercase }}//转换成大写

     自定义过滤器：（string只留a-zA-Z字符串）

   

 app.filter('string', function() {
      return function(input) {
           if(input)
               return (input+"").replace(/\d*\W*/g, '');
      }
})//这里的input为输入的字符串

 

 

路由：

var app = angular.module(‘app’, [
     ’ngRoute’, ‘appCtrl'
])
 
app.config(function($routeProvider) {
     $routeProvider.when(‘/index’, {
          templateUrl: ’tuples/index.html’,
          controller: ‘indexCtrl' 
     }).otherwise({
         redirectTo: ‘/index' 
     })
})

　　

 

 

服务：

var app = angular.module(‘app’, []);
app.factory(‘myService’, [‘$http’, function($http) {
     var doRequest = function() {}
     return {
         mot: functions(name) {
              return doRequest() 
          } 
     }
}]) 

　　

 

转载于:https://www.cnblogs.com/xjser/p/4962930.html