2018-12-11

首先浏览器载入HTML，然后解析成DOM，之后载入angular.js 脚本。之后angularJS寻找ng-app指令，这个指令指示了应用边界，使用ng-app中指定的模块来配置注入器$injector,注入器是用来创建编译服务$compilesevice和根作用域$rootScope的。编译服务是用来编译DOM并把它连接到根作用域。在执行过程中，利用MVC模式渲染视图。这就是angularjs渲染界面的机制。然后angular还有提供与浏览器还有用户的交互。首先浏览器一直处于监听状态，一旦有事件触发以后，一般事件比如说用户的交互操作，定时事件、或者网络事件这些，一旦触发事件。回调会被执行。此时进入js上下文。通常情况下回调会修改dom结构，一旦回调执行完毕，浏览器就会离开JavaScript上下文，并根据dom的修改从新渲染视图。

MVC架构模式是用户操作操作，然后view负责接收用户的操作，之后交给controller做业务逻辑处理，然后是model的数据持久化，将结果反馈给view。

MVVM是view跟model之间通过viewmodel进行交互，而且viewModel和model之间的交互是双向的，因此视图的数据改变后同时会修改数据源，而数据源的改变同样会反馈到view上

回调就是指，事件触发后，事件就被加入到事件队列里，事件队列里的事件会被一个一个的执行，执行的时候如果这个事件被$apply包裹，就会进入到angular的context中，函数就是我们希望在context里执行的函数，通常情况下这些函数会改变应用的某些状态。

angular的特点有数据双向绑定，spa。

所谓数据双向绑定就是指从界面的操作实时反映到数据，数据的变更能实时展现到界面上。插值语法实现数据的展示，在通过ng-model实现双向数据绑定。比如说

angular的单页面应用是利用了路由机制配合末班引擎实现的。一个应用只有一个主页面，通过路由切换不同的状态，嵌套对应的模板引擎，而模板中的动态数据是通过ajax请求从后台拿到的。这种从路由的跳转到渲染完整界面的过程，除了主页面的静态数据，其他全靠js完成

首先定义主模块，叫做每日一课吧，首先配置路由，他依赖于ngRoot所以需要注入一个ngRoot，配置路由就需要$rootProvider,然后根据实际路由的情况给他配置templateURL，以及需要绑定的控制器。$rootProvider.when绑定，最后还有一个otherwise  里面有一个重定向 redirectTo  today。 对应路由的时候一定别忘了设置ng-view

里面用的css3的新属性transform就是做一个动画效果，这个按钮控制侧边导航栏的出现与隐藏。给根作用域绑定一个toggle事件。在按钮的位置绑定一个点击事件ng-click=toggle。这个切换时控制根作用域的一个collapse属性，false的时候就显示，true的时候就折叠。然后根据这个collapse属性是布尔值判断，之后根据相应的值做动画，结合translate和动画延迟，transitionduration这三个条件做出来。

<meta name="referrer" content="never"> 标签突破防盗链

解决跨域

跨域是浏览器的同源策略导致，但是服务器之间就没有跨域一说，所以可以通过注入$http请求，向本地写一个PHP文件 给他发送请求，然后叫服务器去豆瓣的服务器去请求数据。之后拿到数据再渲染到界面，请求数据的api是豆瓣自己提供的，我只需要请求的时候发送一个日期 我用的是get请求，需要传个params，里面包含当前日期就行。然后用到了过滤器，所以需要注入$filter,定义一个过滤器$filter（date）,然后调用的时候可以通过new Date（）得到当前事件，在传入想要的格式，然后就得到豆瓣这个api需要的格式.请求得到数据后，打印一下，看看具体的到什么样式的数据，然后取到数据绑定$scope上，通过差值语法，哪儿用

自定义指令

directive  这里面我定义了一个请求数据的时候需要有个小动图显示正在加载，比如叫loading 然后给他设置template，template是个字符串，是个img标签。给标签设置ng-hide 跟loaded属性关联,来决定是否显示。这个load属性绑定在$rootScope.loaded上，默认值为false，所以加载的时候loaded是false，这个标签就会显示，加载完成后在$http的success里把$rootScope.loaded赋值为true，此时就隐藏了。

整个项目用了一些基本的东西。angular的指令，自定义指令。然后就是依赖注入，用到了$http,$filter,$rootScope,双向数据绑定，利用路由实现单页面应用。

<meta charset="UTF-8">

angular的宗旨是尽量减少dom操作，所以尽量不要引用jQuery。其本身自带封装好的jqLite已经包含了大多数所需api。例如

使用方法

angular.element(element);

element：包装成jquery对象的html字符串或者dom元素

                    addClass() 给元素添加指定的类。 

                    after() 在元素的后面插入内容。 

                    append() 将内容插入到元素的尾部。 

                    attr() 获取或者设置元素的属性①值。 

                    bind()/on() 给选中元素的一个或者多个事件附加一个事件处理程序。 

                    children() 获取元素的子元素。 

                    clone() 创建一个元素的深复制。 

                    contents() 获取每个元素的子节点，返回的集合中包含文本和注释节点。 

                    css() 获取或设置元素的style属性值。 

                    data() 存储或返回与元素关联的指定数据值。 

                    eq() 获取指定索引位置的元素。 

                    find() 过滤元素的子节点，只能通过标签名过滤。 

                    hasClass() 确定元素本身是否分配了给定的类。 

                    html() 获取或者设置元素的HTML内容。 

                    next() 获取紧跟元素的兄弟元素。 

                    off()/unbind() 通过名称移除一个事件处理程序。 

                    parent() 获取元素的父元素。 

                    prepend() 将内容插入到元素的开头。 

                    prop() 获取或设置元素的属性①值。 

                    ready() 指定一个DOM加载完成时执行的函数。 

                    remove() 从DOM中移除元素。 

                    removeAttr() 从元素中移除一个属性（attribute）。 

                    removeClass() 从元素中移除一个、多个或者所有类。 

                    removeData() 从元素中移除先前存储的数据。 

                    repalceWith() 使用提供的新内容替换元素。 

                    text() 获取或者设置元素中合并的文本内容。 

                    toggleClass() 从元素中添加或者移除一个或者多个类。 

                    triggerHandler() 执行附加给元素的某个事件的所有事件处理程序。 

                    val() 获取或设置元素的当前值。 

                    wrap() 使用指定的HTML结构包裹元素。 

1. ng-model是用于表单元素的，支持双向绑定。对普通元素无效；

2. ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；

3. 当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

ng-repeat 和ng-options的区别

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

$scope.sites = [

    {site : "Google", url : "http://www.google.com"},

    {site : "Runoob", url : "http://www.runoob.com"},

    {site : "Taobao", url : "http://www.taobao.com"}

];

ng-repeat 有局限性，选择的值是一个字符串:

实例

使用 ng-repeat:

<select ng-model="selectedSite">

<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

</select>

<h1>你选择的是: {{selectedSite}}</h1>

2017/8/1 15:11 - 屏幕剪辑

使用 ng-options 指令，选择的值是一个对象：

实例

使用 ng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">

</select>

<h1>你选择的是: {{selectedSite.site}}</h1>

<p>网址为: {{selectedSite.url}}</p>

2017/8/1 15:12 - 屏幕剪辑

当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。

ng-options 使用对象有很大的不同，如下所示：

实例

使用对象作为数据源, x 为键(key), y 为值(value):

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">

</select>

<h1>你选择的值是: {{selectedSite}}</h1>

2017/8/1 16:11 - 屏幕剪辑

novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。

<form novalidate>

</form>

angular的表单验证

required  必填

ng-required 必须，而且允许我们基于控制器布尔条件标记输入字段为必须

ng-minlength  定输入文本值的最小长度

ng-maxlength  该指令可以设定文本输入值的最小长度

ng-pattern  文本输入的有效性可以针对指定的正则表达式模式进行检查

type=”email”  文本输入内置电子邮件验证。

type=”number”  带有数量验证的文本输入。也可以有最小和最大值的附加属性。

type=”date”  如果浏览器支持，显示一个HTML日期选择器。否则，默认为一个文本输入。ng-model

绑定到日期对象。预计日期格式为yyyy-mm-dd(例如2009-10-24)。

type=”url”  带有输入验证的URL文本输入。