zoukankan      html  css  js  c++  java
  • 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() 
              } 
         }
    }]) 
    

      

  • 相关阅读:
    Open source cryptocurrency exchange
    Salted Password Hashing
    95. Unique Binary Search Trees II
    714. Best Time to Buy and Sell Stock with Transaction Fee
    680. Valid Palindrome II
    Java compiler level does not match the version of the installed Java project facet.
    eclipse自动编译
    Exception in thread "main" java.lang.StackOverflowError(栈溢出)
    博客背景美化——动态雪花飘落
    java九九乘法表
  • 原文地址:https://www.cnblogs.com/xjser/p/4962930.html
Copyright © 2011-2022 走看看