2018/11/20

今日总结:
1、了解AngularJS中 ng-include的常用场景
2、了解了Angular JS 依赖注入的设计模式、以及ng-view 路由的使用方式
3、了解了Vue的生命周期，以及创建Vue实例的方式
4、使用Vue.js写了简单的TodoList demo

ng-include

注意：

默认情况下ng-include指令不允许包含其他域名的文件
如果你需要包含其他域名的文件，你需要设置域名访问白名单

<div ng-include="'https://c.runoob.com/runoobtest/angular_include.php'"></div> 
<script> 
	var app = angular.module('myApp', []) 
	app.config(function($sceDelegateProvider) {
 		$sceDelegateProvider.resourceUrlWhitelist([ 'https://c.runoob.com/runoobtest/**' ]);
  	});
   </script>

此外还需要设置服务端允许跨域访问，设置方法

<?php // 允许所有域名可以访问 
	header('Access-Control-Allow-Origin:*'); 
	echo '<b style="color:red">我是跨域的内容</b>';
 ?>

Angular JS 依赖注入

wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

简单的来说就是：事先准备好依赖，当我需要此依赖来完成相关的功能时，就将此依赖注入进来，就可以使用。
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• value 
• factory 
• service 
• provider 
• constant

   Value 是一个简单的javascript对象，用于向控制器传值:
   minApp.value("defaultInput",5);
   mainApp.controller("myCtrl",function($scope,defaultInput){
    	$scope.number=defaultInput;
    })

Factory 是一个函数用于返回值，在service和controller需要时创建
通常我们使用factory函数来计算或返回值
说白了就是封装一个方法，方便我们进行开发

AngularJS ng-view 路由

通常我们的 URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，例如：

http://runoob.com/#!/first
http://runoob.com/#!/second
http://runoob.com/#!/third

注意 Angular1.6 之前的版本是通过 # + 标记 实现路由。
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 #! 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 #! 号后面内容的功能实现。 AngularJS 路由就通过 #! + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。


路由设置对象

错误

使用ng-view时遇到的错误：

Access to XMLHttpRequest at 'file:///F:/AngularJS/angularJS-demo/ng-view/home.html' from 
origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

解决办法：
在angularJS下 chrome不支持访问其他的资源即使是本地文件
但在Firefox上便可以
谷歌下可以设置
打开谷歌浏览器快键图标点击右键-属性-快键方式-目标位置-加上“ --allow-file-access-from-files --disable-web-security”重启浏览器即可

Vue 生命周期

近期任务：使用Vue实现demo： https://weblaunchchecklist.com/
在Vue 中有十一个生命周期函数 常用的有八个
生命周期函数就是在页面渲染的某一时间点上自动执行的函数

     依次是：
     beforeCreate
     created
     beforeMount
     Mounted
     beforeUpdate
     updated
     beforeDestory
     destoryed

Vue的生命周期类似于React的七大生命周期

代码调试在console下显示结果：

创建一个Vue实例

简单的Todolist

父组件向子组件传值 使用v-bind
使用组件时如果要接受外部传入的值
需要使用v-bind使用一个变量绑定到这个值才能将其传入
然后在组件中用props接受外部传入的值组成的数组才能使用
<todo-item v-bind:content="item" :index="index" v-for="(item,index) in list" @delete="handleRemove"> </todo-item>

子组件向父组件传值 通过 $emit 监听父组件的函数 同时传入参数，就可以实现向父组件传值

定义一个全局的组件
         Vue.component("TodoItem",{
            props:[
                'content'
            ],
            template: `<li>{{content}}
                    <span style="color:red;cursor: pointer;" title="删除"> x</span>
                </li>`
        })

v-model 将输入框的值绑定到vue应用程序变量inputValue上 就可以实现双向绑定
v-on:click 类似 ng-click
v-for=“item in list” 类似 ng-repeate