首页 > 爱创动态 > 正文

angular课堂笔记 体验angular
2017-12-27 09:57:56   来源:   评论:0 点击:

AngularJquery:工具库,当我们需要一些工具方法的是,我们会想到他,把他拿过来直接就可以使用Vue:基于MVVM模式的一个框架,实现了模型,...

Angular

Jquery:工具库,当我们需要一些工具方法的是,我们会想到他,把他拿过来直接就可以使用

Vue:基于MVVM模式的一个框架,实现了模型,视图的双向绑定,通过视图模型(Vue实例化对象)

Angular:也是基于MVVM模式的一个框剪,实现了模型与视图的双向绑定,通过过视图模型(作用域scope)

Angular与vue相比是一个更庞大的框架,提供 功能方法更多,如果将vue比作地球,angular就想太阳。

Angular功能很庞大,它为大型项目设计的。如果我们的项目十分庞大,十分复杂,我们用angular是有意义的。
 

获取

Github: https://github.com/angular/angular

命令行获取 bower install angular

官网:https://www.angularjs.org/
 

体验angular

Angular不依赖于其他库(jquery)

1 <body ng-app>

3 <div id="app">
4 <input type="text" ng-model="msg">
5 <p>{{msg}}</p>
6 </div>

8 <script type="text/javascript" src="angular.js"></script>
9 </body>

在angula我们通过定义一个ng-app来启动一个应用程序

流程

1 页面加载完毕,angular开始对页面处理,寻找ng-app指令,找这个指令以后,就确认app容器元素了,此时开始对该容去元素内部的元素进行处理(在angular中,我们通常就爱你攻ng-app定义在最外层)

2 此时遍历到input元素,这个元素上有个ng-model指令,此时angular将该元素的内容绑定在作用域中的msg变量中

3 遍历到p元素,此时p元素进行了一个插值错作,angular会将作用域中的该变量的值插入到p元素内,

4 遍历完成,将angular应用程序启动,我们就可以体验双向绑定的功能
 

Ng-init

初始化数据的指令,

在angular中,我们可以通过ng-init来初始化我们应用程序中的数据,
ng-init指令对应的属性值就是我们要初始化的数据,定义方式跟js中定义变量方式一样

多个变量定义时候用;隔开,不能用,

Ng-bind

用来做插值操作的,他的优势,我们看不不到页面加载时候的插值符号了,

为元素绑定一个内容值,他的属性值就是要被渲染的内容

1 <body ng-app="myApp" ng-init="msg='hello'; date='9月8日'">
2 <div id="app">
3 <input type="text" ng-model="msg">
4 <p>{{msg}}</p>
5 <h1 ng-bind="date"></h1>
6 </div>

Angular.module

我们页面中的变量往往不仅仅一两个,可能会有很多,所以定义在ng-init不方便管理,可读性差

因此我们就要在js中定义这些变量

要为应用程序定义这些变量,我们要做第一件事就是获取这个应用程序

Angular.module可以获取我们的应用程序

通常有两个参数

第一个参数表示应用程序的名称(ng-app指令的值)

第二个参数表示应用程序的依赖集合(服务),是一个数组,如果没有依赖传递一个空数组

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

ng-controller

我们要在js中定义这些变量,

第一步是获取这个应用程序,

第二步是创建一个作用域,在作用域中定义这些变量

创建作用用ng-controller指令,创建一个作用域的

App对象中有个方法叫controller,通过这个方法我们可以将页面中的控制器拿到js中
接收两个参数

第一个参数表示控制器名称

第二个参数表示控制器处理函数,通常,我们在这个函数中定义作用域中的变量

作用域是一个空对象,通过它,我们什么也做不了

参数是一个空数组,什么都没有,一次我们在函数中什么也干不了,

那么我们想定义变量我们就要获取作用域,但是我们目前通过this,arguments都获取不到,

Angular提供了一个技术叫参数注入,我们想用什么功能,直接才参数里传递,

我们想使用作用域,我们可以直接在参数中传递进来,angular作用域相当于一个内置的服务,angular内置服务有个特点,都是以$开头的

作用域服务名称叫$scope

在作用域中定义变量,我们通过$scope.语法定义

1 app.controller('myCtrl', function ($scope) {
2 $scope.msg = 'hello';
3 $scope.date = '9月8日'
4 })
 
往期文章

angular课堂笔记 第一天
 
js基础 定时器
 
js基础 IE6,7,8方法
 
js基础 高级浏览器
 
js基础 对应思想 排他思想

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

https://www.icketang.com/

相关热词搜索:课堂笔记

上一篇:angular课堂笔记 第三天
下一篇:最后一页

分享到: 收藏