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()
          }
     }
}])

  

时间: 2024-10-09 05:10:40

angular.js学习笔记--概念总结的相关文章

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Angular JS学习笔记

之前的学习方法有点盲目,建议以后只看与工作有关的内容,并且多问那些是只和工作有关联的. 遇到问题的时候,项目不急的话,自己研究,项目急的话,马上问. 方法不对,再努力也没有用. Angular JS学习网站:http://www.zouyesheng.com/angular.html#toc7 [  项目有关的内容 ] ng-model ng-click ng-options ng-repeat ng-if ng-show ng-hide ng-controller ng-href(有印象) {

[Cousera Angular JS学习笔记]第一周

最近在给搜索引擎做前台,开始学习Angular JS,直接上coursera上的课程:https://www.coursera.org/learn/angular-js/home/week/1(没有JS基础的同学可以和我一样先过下cousera的JS课程 Interacticity with JavaScript) 要先安装bower(方便获取JS),安装bower之前要先安装node JS (1) 安装nodejs过程直接参考http://czpae86.iteye.com/blog/1636

Angular JS 学习笔记(一)

1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net/

Angular.js学习笔记 (二)

用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.createElement('a'); aLink.href = url; console.log(aLink);//<a href="https://www.baidu.com:8080/aaa/1.html?id=10#name"></a> console.log(

Angular.js学习笔记(三)

一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} // 结果:tank is good2.date 格式化{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:253.n

【转载】Angular.js学习笔记 (一)

- angular中最重要的概念是指令(directive)- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系### 模块(Module)- 我们可以通过angular.module创建一个模块- angular.module方法传递两个参数才是创建模块,一个参数是获取模块### 控制器(Controller) -常用方法:<html lang="en" ng-app="HelloApp"

[Cousera Angular JS学习笔记]第一周(2)

之前写了一个简单的angular的页面,这边主要要学习几个用法:controller,filter (1)第一个练习主要是把原来的ng-init的内容移到controller 首先定义module名称 <html lang="en" ng-app="confusionApp"> 然后初始化module和controller,是在script标签下面 <script> var app = angular.module('confusionApp