angularJs知识点
MVC (3)
JS MVC (3)
Angular JS MVC：MVVM（Model-View-ViewModel） (4)
$scope作用域 (5)
$scope (5)
作用域的生命周期 (5)
$rootScope (6)
控制器作用域继承 (7)
Angular JS run() 方法 (8)
Angular JS依赖注入中代码压缩问题 (9)
Angular JS 的$watch()方法 (10)
$digest循环 (10)
$watch列表：$watchers (10)
脏值检查 (11)
$watch()方法 (12)
Angular JS 的$apply()方法 (14)
$apply() (14)
何时使用$apply (15)
Angular JS工具方法 (16)
angular.bind(self,fn,args) (16)
angular.copy(source,[destination]) (17)
angular.equals(o1,o2) (18)
angular.extend(dst,src) (18)
angular.forEach(obj,iterator,[context]) (19)
angular.fromJson(string) (19)
angular.bootstrap(element,[modules]) (20)
Angular.element() (21)
其他 (21)
类型判定 (21)
Angular JS MVC：
MVC
MVC（模型-视图-控制器）是一套设计模式，可以分层设计应用。将数据（模型）与用户视图（视图）解耦，通过中间控制器（Controllers）处理业务逻辑、用户输入以及相应的逻辑跳转。
●模型：是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中
存取数据。
●视图：是应用程序中处理数据显示的部分，通常思路是依据模型数据创建的。
●控制：是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户
输入，并向模型发送数据。
JS MVC
传统web应用将大量的业务逻辑放在服务端执行，客户端只负责页面交互，这样会导致服务端负载过大，分布式处理能力弱等缺陷。
JS MVC web应用程序架构主要致力于将服务端的逻辑处理转移到客户端。
优点：
●可扩展性：服务器处理能力保持不变的前提下，应用被越多的客户使用，只需增加客户
端机器即可。
●实时的用户响应：客户端代码可以立即对用户的输入作出反应，不需要等待网络传输。
●结构清晰的编程模型：用户界面可以有效的分离应用程序的业务逻辑。
●客户端状态管理：在客户端维护临时会话状态信息可以减少服务器上的内存负载。
●离线应用：如果大部分应用程序的代码已经在客户端运行，那么创建一个离线版本的应
用程序将变的更加容易。
Angular JS MVC：MVVM（Model-View-ViewModel）
Angular JS引入了软件设计的MVC模式。但不完全是MVC模式，而是更倾向于MVVM，而angular JS中的作用域$scope被认为是ViewModel。采用了数据绑定（DATA-BINDING），View的变动，自动反映在 ViewModel，反之亦然。
●模型：model就是数据模型。
视图对象需要被$scope引用，可以使用任何类型的JavaScript对象、数组、基本类型。并提供一些API监控其状态。
●视图：view就是用HTML，CSS写的UI视图代码，其中包含Angular JS的指令，表达
式。
●业务控制：controller控制器起到设置$scope对象的初始状态以及后续的动作关联。
在angular JS控制器中我们无需添加对于DOM级的事件监听，这些在Angular JS中已经内置了。在UI节点DOM事件发生后Angular JS会自动转到scope上的某个行为逻辑。
这样就奠定了angular JS MVC应用架构。$scope对象拥有数据的引用关系、控制器定义行为、视图处理页面展示布局以及相应的处理跳转。
$scope作用域
$scope
$scope对象是定义应用业务员逻辑、控制器方法和视图属性的地方。
作用域是视图和控制器之间的胶水。在应用将视图渲染并呈现给用户之前，视图中的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给angular JS。
作用域是应用状态的基础。基于动态绑定，可以依赖视图在修改数据时立刻更新$scope，也可以依赖$scope在其发生变化时立刻重新渲染视图。
Angular JS将$scope设计成和DOM类似的结构，因此$scope可以进行嵌套，也就是说可以引用父级$scope中的属性。
Angular JS将应用的业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中。
$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。
开发AngularJS应用的大部分工作内容，就是构建作用域及其相关的功能。
作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成视图模型（view model）。
作用域的生命周期
●创建：在创建控制器或指令时， AngularJS会用$injector创建一个新的作用域，并在
这个新建的控制器或指令运行时将作用域传递进去。
●链接:当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。所有创
建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。
这些函数被称为$watch函数， Angular通过这些函数获知何时启动事件循环。
●更新:当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每
个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。
●销毁:当一个$scope在视图中不再需要时，angular JS将会自动清理和销毁这个作用域。
也可以使用这个$scope上叫做$destory()的方法来清理这个作用域。$rootScope
Angular JS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope 是所有$scope对象的最上层。
$rootScope是angular JS中最接近全局作用域的对象。
我们在$rootScope中设置了一个name变量并在视图中引用了它：
var app = angular.module("myApp", []);
app.run(function ($rootScope) {
$https://www.sodocs.net/doc/546080200.html, = "World";
});
在视图中可以引用这个name属性并将它展示给用户：
Hello {{ name }}
我们可以不将变量设置在$rootScope上，而是用控制器显式创建一个隔离的子$scope 对象，把它设置到这个子对象上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上，如下所示：
Hello {{ name }},{{age}}
我们可以创建一个控制器来管理与其相关的变量，而不用将name变量直接放在$rootScope上：
app.controller('MyController', function ($scope, $rootScope) {
$https://www.sodocs.net/doc/546080200.html, = "Ari";
$rootScope.age = 30;
});
ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。
控制器作用域继承
AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对ng-app所处的层级来讲，它的父级作用域就是$rootScope。
有一个例外：在指令内部创建的作用域被称作孤立作用域。
除了孤立作用域外，所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作域。如果熟悉面向对象编程，对这个机制应该不会陌生。
默认情况下， AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法更新。
通过例子来看一下这个行为。创建一个ParentController，其中包含一个user对象，再创建一个ChildController来引用这个对象：
app.controller('ParentController', function ($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function ($scope) {
$scope.sayHello = function () {
$https://www.sodocs.net/doc/546080200.html, = 'Ari Lerner';
};
});
如果我们将ChildController置于ParentController内部，那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制，我们可以在子作用域中访问ParentController的$scope对象。
例如，我们可以在ChildController的DOM元素中访问定义在ParentController中的person对象。
Say hello {{person}}
{{ person }}//点击前:Say hello {"greeted":false},
//点击后:Say hello{"greeted":false,"name":"Ari Lerner"}
控制器的这种嵌套结构和和DOM的嵌套结构很相似。
Angular JS run() 方法
运行块在注入器创建之后被执行，它是所有AngularJS应用中第一个被执行的方法。
运行块是AngularJS中与main方法最接近的概念。运行块中的代码块通常很难进行单元测试，它是和应用本身高度耦合的。
运行块通常用来注册全局的事件监听器或初始化全局数据，只对全局作用域起作用，如$rootScope。例如，我们会在.run()块中设置路由事件的监听器以及过滤未经授权的请求。假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法：
angular.module('myApp', []).run(function($rootScope, AuthService) {
$rootScope.$on('$routeChangeStart', function(evt, next, current) {
// 如果用户未登录
if (!https://www.sodocs.net/doc/546080200.html,erLoggedIn()) {
if (next.templateUrl === "login.html") {
// 已经转向登录路由因此无需重定向
} else {
$location.path('/login');
}
}
});
});
run()函数接受一个参数。
Initialize Fn（函数） Angular JS在注入器创建后会执行这个函数。
Angular JS依赖注入中代码压缩问题
由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。所以如果你要压缩控制器的JS代码，它所有的参数也同时会被压缩，这时候依赖注入系统就不能正确的识别出服务了。
如压缩前的代码为：
var app = angular.module('app',[]);
app.controller('MainCtrl', function($scope, $timeout){
$timeout(function(){
console.log($scope);
}, 1000);}
);
压缩后则会变为:
app.controller("MainCtrl",function(e,t){t(function(){console.log(e)},1e3)})
那么就不知道MainCtrl依赖于什么了。
为了克服压缩引起的问题，只要在控制器函数里面给$inject属性赋值一个依赖服务标识符的数组：
MainCtrl.$inject = ['$scope', '$timeout'];
另一种方法也可以用来指定依赖列表并且避免压缩问题——使用Javascript数组方式构造控制器：把要注入的服务放到一个字符串数组（代表依赖的名字）里，数组最后一个元素是控制器的方法函数：
app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){ $timeout(function(){
console.log($scope);
}, 1000);}
]);
上面提到的两种方法都能和Angular JS可注入的任何函数完美协作，要选哪一种方式完全取决于你们项目的编程风格，建议使用数组方式。
Angular JS 的$watch()方法
$digest循环
在$watch()方法前，先讲一下$digest循环。（数据绑定的核心）
在标准的浏览器流程中，当事件被触发时（比如点击一个链接），浏览器会执行注册给该事件的回调函数。（页面加载、 $http请求返回响应、鼠标移动以及按钮被点击等情况都会触发事件。）当事件被触发时， JavaScript就会创建一个事件对象，并执行这个事件对所在的监听特定事件的所有函数。然后它会运行JavaScript函数内的回调方法，这会回到浏览器中，还可能更新DOM。同一时间不能运行两个事件。浏览器会等待前一个事件处理程序执行完成，再调用下一个事件处理程序。
在非Angular JavaScript环境中，可以给div的点击事件附加一个回调函数。无论何时，只要发现元素上的点击事件，这个回调函数就会运行：
var div = document.getElementById("clickDiv");
div.addEventListener("click", function(evt) {
console.log("evt", evt);
});
无论何时，只要浏览器检测到点击事件，就会调用使用addEventListener注册到文档上的函数。
当我们将Angular混入这个流程中时，它会扩展这个标准的浏览器流程，创建一个Angular上下文。这个Angular上下文指的是运行在Angular事件循环内的特定代码，该Angular事件循环通常被称作$digest循环。为了理解这个Angular上下文，需要看看在它里面到底发生了什么。那我们就来看看$digest循环中的重要部分：$watch列表。
$watch列表：$watchers
每当我们在视图中追踪一个事件时，会给它注册一个回调函数，然后希望在页面中触发该事件时调用这个回调函数。例子：
Hello {{ name }}
无论何时，只要用户更新这个输入字段， UI中的{{ name }}就会改变。发生这一变化是因为我们把UI中的输入字段绑定给了$https://www.sodocs.net/doc/546080200.html,属性。为了更新这个视图，Angular 需要追踪变化。它是通过给$watch列表添加一个监控函数做到这一点的。
$scope对象上的属性只会在其被用于视图时绑定。在上述例子中，我们只给$watch列表添加了一个函数。记住，对于所有绑定给同一$scope对象的UI元素，只会添加一个$watch 到$watch列表中。
这些$watch列表会在$digest循环中通过一个叫做“脏值检查”的程序解析。
脏值检查
脏值检查是一个简单的过程，可归结为一个非常基础的概念：检查值是否发生了变化，而整个应用还没同步该变化。
Angular应用持续跟踪当前监控的值（就是监控对象中那些稀奇古怪的东西）。 Angular 会遍历$watch列表，如果从旧值更新后的值没有发生变化，它会继续遍历监控列表。如果值发生了变化，该应用会启用新值并继续遍历$watch列表，如图所示。
Angular遍历完整个$watch列表，只要有任何值发生变化，应用将会退回到$watch循环中，直到检测到不再有任何变化。
为什么要再次运行这一循环？如果有一个名为$scope.full_name的属性由$scope.first_name + $https://www.sodocs.net/doc/546080200.html,st_name组成，那么这些值的任何变化都会改变$scope.full_name，因此循环需要再次执行以确认不再有任何变化了。
如果这个循环运行10次或者更多次， Angular应用会抛出一个异常，同时停止运行。
退出$digest循环后，浏览器会重绘DOM已刷新视图。
$watch()方法
$scope对象上的$watch方法会给Angular事件循环内的每个$digest调用装配一个脏值检查。如果在表达式上检测到变化， Angular总是会返回$digest循环。
$watch函数本身接受两个必要参数和一个可选的参数：
watchExpression(对象属性/函数)
watchExpression可以是一个作用域对象的属性，或者是一个函数。在$digest循环中的每个$digest调用都会涉及它。
如果watchExpression是一个字符串， Angular会在$scope上下文中对它求值。如果它是一个函数，那么Angular会认为它会返回应该被监控的值。
listener/callback
作为回调的监听器函数，它只会在watchExpression的当前值与先前值不相等（除了首次运行初始化期间）时调用。
objectEquality（可选）
objectEquality是一个进行比较的布尔值，用来告诉Angular是否检查严格相等。
$watch函数会给监听器返回一个注销函数，我们可以调用这个注销函数来取消Angular 对当前值的监控。
//...
var unregisterWatch = $scope.$watch('newUser.email',function(newVal, oldVal) { if (newVal === oldVal) return; // 初始化
});
// ...
// 稍后，可以通过调用这个注销函数来注销这个监控器
unregisterWatch();
在这个例子中，假如完成了对newUser.email的监控，那么可以通过调用它所返回的注销函数来清除这个监控器。
例如，你想要解析一个输入字段的值，然后使用空格分割全名的方式找到名字和姓氏。假定给定的视图看起来像这样：
我们在full_name属性上设置一个$watch监听器来检测值的任意变化。也就是在full_name属性上设置$watch函数。
angular.module("myApp").controller("MyController", ['$scope', function($scope) { $scope.$watch('full_name', function(newVal, oldVal) {
// newVal表示在这里可以用的full_name新值
// 而oldVal表示full_name的旧值
});
}]);
在这个例子中，我们设置了一个AngularJS表达式，这会让Angular应用“监控full_name属性任何可能的变化，然后在检测到变化时运行指定的函数”。
监听函数会在初始化时被调用一次，而此时newVal和oldVal的值都为undefined（并且是相等的）。在这种情况下，如果正处在初始化阶段或者先前的值发生了变化，通常最好
是检查内部的表达式。在监控函数内很容易实现这一检查，就像这样：
$scope.$watch('full_name', function(newVal, oldVal) {
if(newVal === oldVal) {
// 只会在监控器初始化阶段运行
} else {
// 初始化之后发生的变化
}
});
在这段代码中， $scope.$watch()函数在$scope对象上为full_name属性设置了一个
扩展：$watchCollection(obj,listener),可以对某个对象或数组进行监控,只要对象中属性发生变化就触发监听回调。用法同$watch()。
Angular JS 的$apply()方法
$apply()
$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如，假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时，就必须使用$apply()。
$apply()函数接受一个可选的参数：
expression（字符串/函数）
这个表达式可选地接受一个字符串或函数，并且是在当前作用域内执行。
如果传入一个字符串， $apply()首先会在这个字符串上调用$eval()，以强制Angular 在局部作用域上下文中使用$eval()运行字符串表达式。
如果传入一个函数，这个函数将会在所传入的函数作用域上执行。$exceptionHandler 服务会捕获和处理$eval()方法抛出的所有异常。最后， $apply()方法还会直接调用$digest 循环。
// 使用要eval的字符串调用$apply示例
$scope.$apply('message = "Hello World"');
// 使用函数的方式并给函数传入一个作用域
$scope.$apply(function(scope) {
// 然后在函数中使用传入作用域
scope.message = "Hello World";
});
// 使用函数时忽略作用域
$scope.$apply(function() {
$scope.message = "Hello World";
});
// 或者通过在操作的尾部调用$apply()以强制运行$digest循环，即强制检测$watch列表的变化。
$scope.apply();
简而言之，使用$scope.$apply()时其实就是将对象的变化通知angular来刷新自己(视图，模型)。
如果在事件被触发时调用$apply()，就会使用Angular事件循环来运行它。如果没有调用$apply()，就不会在事件循环内执行这个函数，而它会运行在Angular上下文外部。（angular上下文外部：脱离angular控制的代码部分）
注意：请把要执行的代码和函数传递给$apply 去执行，而不要自已执行那些函数然后再调用$apply。当我们将function传递给$apply执行时，这个function会被包装到一个try…catch块中，所以一旦有异常发生，该异常会被$exceptionHandler service处理。
何时使用$apply
通常可以依赖于Angular提供的可用于视图中的任意指令来调用$apply()。所有ng-[event]指令（比如ng-click、 ng-keypress）都会自动调用$apply()。
此外还可以依赖于一系列Angular内置的服务来调用$digest()。比如$http服务会在XHR请求完成并触发更新返回值之后调用$apply()。
无论何时我们手动处理事件，使用第三方框架（比如jQuery、 Facebook API），都可以使用$apply()函数让Angular返回$digest循环。
当我们将jQuery和Angular集成在一起时（这通常被视为一个肮脏的行为），就需要
使用$apply()，因为Angular不会察觉到执行在Angular上下文外部的事件。例如，在使用jQuery插件时（比如datepicker），就需要使用$apply()将来自jQuery的值传递到Angular 应用中。在这里，我们构建了一个简单的指令，指令中我们在元素上使用了datepicker这个jQuery插件方法。datepicker插件暴露了一个onSelect事件，这个事件会在用户选择日期时触发。为了在Angular应用内部获取用户选择的日期，我们需要在$apply()函数内运行datepicker的回调函数。ele.datepicker()函数是由jQuery datepicker插件提供的可用于DOM元素的属性方法。要让它工作起来，需要确保在页面上引入了jQuery和jQuery datepicker插件。
ctrl.$setViewValue()函数是在DOM元素上使用ng-model时提供的指令。
app.directive('myDatepicker', function() {
return function(scope, ele, attrs, ctrl) {
$(function() {
// 在元素上调用datepicker方法
ele.datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function(date) {
scope.$apply(function() {
ctrl.$setViewValue(date);
});
}
});
});
}
});
Angular JS工具方法
angular.bind(self,fn,args)
作用：返回一个新的函数，绑定这个函数的this指向self
参数：
self：新函数的上下文对象
Fn：需要绑定的函数
Args：传递给函数的参数
返回值：this指向self的新函数
var obj = {
name: 'tom',
print: function (country,age) {
console.log(https://www.sodocs.net/doc/546080200.html, + ' is form ' + country+'; age:'+age); }
};
var self = {
name: 'jerry'
};
var bindFn = angular.bind(self, obj.print, 'China',20);
obj.print('American',20);//tom is form American; age:20
bindFn();//jerry is form China; age:20
angular.copy(source,[destination])
作用：对象的深拷贝
参数：
Source：源对象
Destination：拷贝的对象
返回值：拷贝的对象
var obj = {
name: 'tom',
age: 50
};
var destination={};
var copyObj = angular.copy(obj,destination);
console.log(copyObj,destination); //Object {name: "tom", age: 50} Object {name: "tom", age: 50}
angular.equals(o1,o2)
作用：正常比较和对象的深比较
参数：
O1：比较的对象
O2：比较的对象
返回值：boolean
angular.equals(3, 3); //$ true
angular.equals(NaN,NaN); //$ true
angular.equals({name:'xxx'},{name:'xxx'}); //$ true
angular.equals({name:'xxx'},{name:'yyy'}); //$ false
angular.extend(dst,src)
作用：对象的扩展（合并）
参数：
Dst：扩展的对象
Src：源对象
返回值：扩展的对象
var dst = {name: 'tom', country: 'China'};
var src = {name: 'jerry', age: 10};
console.log(dst); //Object {name: "tom", country: "China"}
angular.extend(dst, src);
console.log(src); //Object {name: "jerry", age: 10}
console.log(dst); //Object {name: "jerry", country: "China", age: 10} angular.forEach(obj,iterator,[context])
作用：对象的遍历
参数：
Obj：对象
Iterator：迭代函数
Context：迭代函数中上下文
返回值：obj
var obj = {name: 'tom', country: 'China'};
angular.forEach(obj, function (value, key) {
console.log(key + ':' + value);
});
// name:tom
// country:China
var array = ['tom', 'jerry'];
angular.forEach(array, function (item, index) {
console.log(index + ':' + item + ' form ' + this.country);
}, obj);
// 0:tom form China
// 1:jerry form China
angular.fromJson(string)
作用：字符串转json对象
参数：
String：字符串
返回值：json对象
var json = angular.fromJson('{"name":"tom","age":34}'); console.log(json); // Object {name: "tom", age: 34}
angular.toJson(json,pretty)
作用：json对象转字符串
参数：
Json：json对象
Pretty：boolean number 控制字符串输出格式
返回值：字符串
console.log(angular.toJson({name:'tom'}));// {"name":"tom"} console.log(angular.toJson({name:'tom'},true));
// {
// "name": "tom"
// }
console.log(angular.toJson({name:'tom'},10));
// {
// "name": "tom"
// }
}
angular.bootstrap(element,[modules])
作用：手动启动angular JS应用，同ng-app=’myApp’
参数：
Element：页面元素
[modules]：angular模块名
var element = document.createElement('div');
angular.bootstrap(element, ['myApp']);
注意：angular.bootstrap()只允许启动angular应用一次
爱前端—AngularJS_课堂笔记
Angular1.x入门和项目开发 第1天课堂笔记 班级：全栈前端训练营0219班 讲师：邵山欢 日期：2017年6月14日 邵山欢老师 微博：@邵山欢 QQ:179427026 E-mail:ssh@https://www.sodocs.net/doc/546080200.html, 爱前端官网：https://www.sodocs.net/doc/546080200.html,
目录 Angular1.x入门和项目开发 (1) 目录 (2) 零、框架课程概述 (3) 一、通过HelloWorld认识MVVM (3) 1.1HelloWorld (3) 1.2引入控制器 (5) 1.3Angular简介 (7) 1.4MV* (10) 二、双向数据绑定 (12) 三、狠砸思维-只关心数据！不关心DOM！ (13) 3.1调色板 (13) 3.2微博发布框 (15) 3.3小小学生表格 (16) 3.4联动下拉框 (18) 四、Angular中的脏检查 (22)
零、框架课程概述 Angular共622个职位满足条件 react共1017个职位满足条件 vue共819个职位满足条件 在中国的市场，Angular有10%的公司使用，React和Vue分掉了剩下的90%，各占60%、40%。React还会越来越多的公司使用，份额更大。 课程颠覆性极强，彻底颠覆我们做网站的思维。“MVVM+组件化开发”是一个特别引人入胜的模式。 代码量更大，项目更牛ｘ，要更下功夫。 一、通过HelloWorld认识MVVM 1.1HelloWorld 在百度静态资源库，可以下载Angular1： https://www.sodocs.net/doc/546080200.html,/ 我们引包，然后书写一条js程序，并且在html标签上添加了第一条“指令”。
{{1+2}}
所有的angular程序，都是通过angular.module()定义一个模块开始的。 模块的定义有两个参数，第一个参数是模块名字（字符串），第二个参数是依赖项（数组）。 在html上书写ng-app="app"这个ng表示angular，所有ng-开头的html标签属性，我们称为“指令”。 在body里面，写上{{1+2}}
我们叫做angular表达式，和模板引擎特别像，你会发现，算术被计算了：Angular4基础知识培训之快速入门
Angular4基础知识培训之快速入门 目录 ?第一节- Angular 简介 ?第二节- Angular 环境搭建 ?第三节- 插值表达式 ?第四节- 自定义组件 ?第五节- 常用指令简介 ?第六节- 事件绑定 ?第七节- 表单模块简介 ?第八节- Http 模块简介 ?第九节- 注入服务 ?第十节- 路由模块简介 第一节Angular 简介 Angular 是什么 Angular是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。
Angular 有什么特点 ?基于Angular 我们可以构建适用于所有平台的应用。比如：Web 应用、移动Web 应用、移动应用和桌面应用等。 ?通过Web Worker和服务端渲染(SSR)，达到在如今Web平台上所能达到的最高渲染速度。 ?Angular 让你能够有效掌控可伸缩性。基于RxJS、Immutable.js 和其它推送模型，能适应海量数据需求。 Angular 提供了哪些功能 ?动态HTML ?强大的表单系统(模板驱动和模型驱动) ?强大的视图引擎 ?事件处理 ?快速的页面渲染 ?灵活的路由 ?HTTP 服务 ?视图封装 ?AOT、Tree Shaking Angular 与AngularJS 有什么区别
?不再有Controller和Scope ?更好的组件化及代码复用 ?更好的移动端支持 ?引入了RxJS与Observable ?引入了Zone.js，提供更加智能的变化检测第二节- Angular 环境搭建 基础要求 ?Node.js ?Git Angular 开发环境配置方式 ?基于Angular Quickstart o https://https://www.sodocs.net/doc/546080200.html,/angular/quickstart ?基于Angular CLI o npm install -g @angular/cli
WEB前端开发最佳实践
WEB前端（HTML5、CSS3、JS技术、jQuery、VUE等主流框架） 开发最佳实践培训班 一、培训简介 HTML5/CSS3是现阶段非常流行，也是很多企业所要求的技术。优点主要在于应用范围广泛广，可以进行跨平台使用。增加了
四、授课专家 张老师北京航空航天大学软件工程硕士, 10多年IT 工作经验，熟悉Html5、Html5游戏开发，Cocos2d-html5，QuarkJS，JQuery，JQueryMobile，CSS，BootStrap，Mui框架，HBuilder，CSS3，Axure，JSON，C#，JavaScript，PHP，PhpCMS等开发技术；熟悉ICONIX，Scrum等项目管理过程并熟练应用，熟悉UML建模，MVC，设计模式，架构思想，熟悉软件测试相关技能，熟悉软件测试管理过程。多年项目管理经验，千人教育培训经验。 郭老师计算机硕士研究生、中培教育高级培训讲师，参与组织并完成了上百个个大中型项目。主要专业特长包括HTML5、移动前端、CSS3、AngularJS、React native、VueJS、BootStrap、Jquery、ZeptoJS、Ajax、JSON、JSONP、Mui框架等相关技术，对Html5应用开发及开发模式有深入研究，熟悉模块化开发，熟悉IT项目管理，熟悉ICONIX、Scrum等软件研发过程改进、详细设计、IT规划。擅长UML建模、MVC、设计模式、架构思想。多年项目管理经验，千人教育培训经验姚老师在电信、电力、金融行业从事 HTML5、Java、Android、PHP开发工作，擅长Web前端、HTML5、Java、Android、PHP。多年软件开发经验，八年IT职业教育经验。2002年开始从事开发工作，具备十余年的开发、管理和培训经验。曾经主持开发《教学管理系统》《酒店管理系统》《车辆跟踪定位系统》《农信社信贷管理系统》等多个大型项目。在Android、iOS、HTML5、游戏开发、JavaME、JavaEE、Linux等领域都有深入研究，现为IT技术自由作家兼HTML5、Android、iOS、JavaME、JavaEE 培训讲师。曾出版过《Android应用开发详解》、《iOS 应用开发详解》《JavaEE Web工程师
基于HTML5的APP应用开发教学大纲
1．课程定位和课程设计 1.1 课程性质与作用 《基于HTML5的APP开发》课程是软件技术专业一门实用性极强的专业基础课程，也是培养软件技术专业学生基于HTML5的APP设计开发能力的一门必修课程。 课程的作用：《基于HTML5的APP开发》主要培养学生从事基于Web及移动APP应用程序开发过程中前端设计与制作的基本技能，使学生掌握网页设计的概念和方法，能够运用专业的网页设计软件设计出常见的静态网页、APP界面等，了解动态网页设计方法及APP与服务端交互方式，具备Web前端开发设计岗位的职业技术能力。通过本课程的学习，旨在提高学生的操作技能，培养学生踏实认真、精益求精、团结合作、创新的精神，培养良好的职业道德。 本课程前导课程包括《计算机基础》、《平面设计》等基础课程，学生完成这些前导课程的学习后，已具备一定的计算机操作与图形图像处理制作能力。通过本课程学习为后续课程《Java web开发技术》、《岗前实训》等打下坚实的基础。 1.2 课程基本理念 近年来，随着计算机软件技术的崛起与发展，软件开发技术被划分成前端和后端技术，其中前端技术主要就是HTML5技术，本课程旨在培养学生运用HTML5实现基于Web APP和移动APP，积累软件开发经验、提高实践动手能力，同时为实现交互式Web应用系统开发奠定良好的基础。 本课程以就业为指导，参照行业职业标准按照基于工作过程的职业能力来进行课程开发，根据所涵盖的岗位群进行工作任务和职业能力分析，确定本课程的工作任务和课程内容，以任务引领为课程框架，将课程按递进方式设计成项目，并以项目为单元组织教学，使学生由浅入深，以点到面的全面掌握HTML5技术的职业技能。 1.3 课程设计思路 本课程采用任务加项目教学的设计思路，学生需要完成30个任务或项目的实践训练任务，各项目任务之间既独立又相互联系：作为项目是独立的，但作为项目当中应用到的知识点任务，各任务之间又是有关联的。在不同的项目之间有些知识点的应用是不断重复的，以强化学生对知识点的理解，也让学生能够接触到大量的不同类型APP的制作。 2．课程目标
初级web前端开发工程师的岗位职责描述
初级web前端开发工程师的岗位职责描述 初级web前端开发工程师的岗位职责描述1 职责： 1. 根据功能需求设计编写页面原型; 2. 前后端联调保证功能流畅; 3. 提高页面易用性、美观提出合理建议。 4、与后台工程师配合开发联调并交付产品; 5、持续优化前端页面体验和访问速度，保证页面精美高效。 任职要求 1、全日制本科以上学历、计算机相关专业; 2、前端开发一年以上工作经验 3、精通html、ajax、js、css、div等web的前端开发技术; 4、有H 5、bootstrap、jquery、AngularJS、angular vue、typescript等框架技术实际开发经验; 5、学习能力强，快速解决问题; 6、善于交流、良好的团队协作能力和敬业精神; 初级web前端开发工程师的岗位职责描述2 职责： 1、负责公司产品UI设计稿的pc端、移动端web界面的还原; 2、维护现有应用产品，按最新需求完成最基本功能的实现; 3、在开发过程中与开发人员的沟通，完成前端与java等后端数据交互联调 4、响应产品需求，完成修改工作; 5、对页面进行优化，对代码进行优化，提高可维护性。 任职资格： 1、大专及以上，计算机软件编程相关专业; 2、1年以上web前端开发工作经验(有成熟上线作品); 3、熟悉最基本的html、css、javascript语法，了解H5、CSS3、ES6+新语法，了解语义化标签; 4、熟悉使用jquery、react 、vue、Bootstrap等前端开发工具及框架; 5、熟悉Javascript数据处理，Ajax交互开发; 6、熟悉使用webpack、gulp、requireJS、rollup等模块化、工程化工具; 7、能够高效编写web界面，熟练使用Git等版本管理工具。 初级web前端开发工程师的岗位职责描述3 职责： 1. 负责公司前端系统和功能的开发、维护; 2. 负责前端公共组件、基础框架的设计和实现; 3. 根据需求实现页面交互效果;配合后台开发工程师，完成Web页面的前端用户交互功能、联调等工作; 4. 参与项目的用户研究、分析，并根据结果改进设计，优化Web产品的易用性，改善用户体验。 任职要求：
AngularJS入门教程
AngularJS入门教程：导言和准备 发表于 2012年9月2日 angularjs 学习AngularJS的一个好方法是逐步完成本教程，它将引导您构建一个完整的AngularJS web应 用程序。 该web应用是一个Android设备清单的目录列表，您可以筛选列表以便查看您感兴趣的设 备，然后查看设备的详细信息。 本教程将向您展示AngularJS怎样使得web应用更智能更灵活，而且不需要各种扩展程序或插 件。 通过本教程的学习，您将： 1. 阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态 数据视图。 2. 学习如何使用AngularJS创建数据侦听器，且不需要进行DOM操作。 3. 学习一种更好、更简单的方法来测试您的web应用程序。 4. 学习如何使用AngularJS创建常见的web任务，例如更方便的将数据引入应用程序。 而且这一切可在任何一个浏览器实现，无需配置浏览器！ 当你完成了本教程后，您将学会： 1. 创建一个可在任何浏览器中的工作的动态应用。2. 了解AngularJS与其它JavaScript框架之间的区别。3. 了解AngularJS如何实现数据绑定。4. 利用AngularJS的种子项目快速创建自己的项目。5. 创建和运行测试。6. 学习更多AngularJS标识资源(API)。 本教程将指导您完成一个简单的应用程序创建过程，包括编写和运行单元测试、不断地测试应 用。 教程的每个步骤为您提供建议以了解更多有关AngularJS和您创建的web应用程序。 您可能会在短时间内快速读完本教程，也可能需要花大量时间深入研究本教程。 如果想看一个简 短的AngularJS介绍文档，请查看快速开始文档。 搭建学习环境 无论是Mac、Linux或Windows环境中，您均可遵循本教程学习编程。您可以使用源代码管理版 本控制系统Git获取本教程项目的源代码文件，或直接从网上下载本教程项目源代码文件的镜像归档压 缩包。 1. 在Mac、Linux或Windows系统中安装Java 运行环境，进行单元测试时需要运行Java程序，以下命令可 检测您的系统是否已安装Java运行环境： ← 上一篇下一篇 → 资讯文档社区关于搜索注册 登录
angularjs入门范例
AngularJS实例入门 Google一下有很多关于AngularJS的文档。 (1)基本构造
{{message}} {{5 * 3}}
(2)输出数据
(3)显示/隐藏
AngularJS入门4-小例子-控制器嵌套
1 2 3
4 5控制器嵌套
6AngularJS基础知识
AngularJS 基础知识1. AngularJS 是什么？ Angular 官网：https://https://www.sodocs.net/doc/546080200.html,/ ， API: http://docs.angularjs-org/api AngularJS 是一个MV*( Model-View-Whatever, 不管是MVC 或者MWM，统称为MDV (Model Drive View ))的 JavaScript 框架，是Google 推出的SPA (sin gle-p age-a pp licati on, 单页面应用)，即协助搭建单页面工程的开源前端框架。通过 AngularJS可以使得开发与测试变得更容易。 AngularJS试图成为Web应用中的一种端对端的解决方案。它由2009年发布第一个 版本，由Google进行维护。 AngularJS的核心思想就是将视图与业务逻辑解耦，而实现方法则是通过数据和视图的 双向数据绑定实现。解耦的代码更有利于进行测试。 A咿M自硼进 双向更新 『％ 图1.双向数据绑定实现解耦
An gularJS依然遵循MVC模式开发，鼓励视图（View ）、数据（Model ）、逻辑（Con troller）组件间的松耦合。 图2.控制器通过依赖注入各项所需要的服务，实现解耦 AngularJS将测试与应用程序编写看得同等重要，在编写模块的同时即可编写测试代码。而且由于实现了各组件的松耦合，因此使得这种测试更容易实现。 AngularJS在编写一个单页面应用时的通常顺序如下: 服务A 服务B 服务C 服务D L耳 L
H'TMIL 制器.利用眼务务，例如数抠过第三步:漏写服
webpack 教程资源收集
webpack 教程资源收集 :v: 初级教程 webpack-howto 作者：Pete Hunt Webpack 入门指迷作者：题叶 webpack-demos 作者：ruanyf 一小时包教会—— webpack 入门指南作者：VaJoy Larn webpack 入门及实践作者：zhouweicsu Webpack傻瓜式指南(一) 译者：前端外刊评论 Webpack傻瓜式指南(二) 译者：前端外刊评论 :muscle: 进阶教程 webpack使用优化作者：alloyteam 如何开发一个 Webpack Loader ( 一 ) 作者：alloyteam 基于 Webpack 和 ES6 打造 JavaScript 类库译者：CSS魔法webpack常用配置总结作者：小凡哥 (译)Webpack——令人困惑的地方作者：chemdemo 基于webpack搭建前端工程解决方案探索作者：chemdemo webpack在PC项目中的应用作者：icepy webpack实践最后一篇作者：icepy webpack_performance 作者：wyvernnot 如何 10 倍提高你的 Webpack 构建效率作者：紅白 Express结合Webpack的全栈自动刷新来源：ACGTOFE webpack 单页面应用实战作者：hsw :fire: webpack 2.0
Webpack2 有哪些新东西译者：cssmagic 如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术? 来源：知乎Webpack 2 Tree Shaking Configuration 来源：Medium Vue 2 + Webpack 2 脚手架 :diamond_shape_with_a_dot_inside: React & webpack react-redux-universal-hot-example 作者：erikras webpack-seed 作者：chemdemo Webpack+React+ES6开发模式入门指南作者：大额_skylar 使用 React 和 Webpack 构建静态网站来源：开源中国 手把手教你基于ES6架构自己的React Boilerplate项目作者：lhc budgeting-sample-app-webpack2 来源：Modus Create :a: Angular & webpack angular-webpack-cookbook 作者：Drew Machat angular-webpack 来源：preboot angular2-webpack 来源：preboot angular2-webpack-starter 来源：AngularClass es6+angular1.X+webpack 实现按路由功能打包项目作者：yang_j_j (译) 通过 Webpack 实现 AngularJS 的延迟加载作者：Cheng_Gu Webpack + Angular的组件化实践作者：王伟嘉 :man: Vue & webpack vue-webpack-boilerplate 来源：vue官方 vue-chat 作者：Coffcer webpack入坑之旅系列作者：guowenfh vue-gulp-webpack单页面组件开发作者：JsAaron
AngularJS实战
江西省南昌市2015-2016学年度第一学期期末试卷 （江西师大附中使用）高三理科数学分析 一、整体解读 试卷紧扣教材和考试说明，从考生熟悉的基础知识入手，多角度、多层次地考查了学生的数学理性思维能力及对数学本质的理解能力，立足基础，先易后难，难易适中，强调应用，不偏不怪，达到了“考基础、考能力、考素质”的目标。试卷所涉及的知识内容都在考试大纲的范围内，几乎覆盖了高中所学知识的全部重要内容，体现了“重点知识重点考查”的原则。 1．回归教材，注重基础 试卷遵循了考查基础知识为主体的原则，尤其是考试说明中的大部分知识点均有涉及，其中应用题与抗战胜利70周年为背景，把爱国主义教育渗透到试题当中，使学生感受到了数学的育才价值，所有这些题目的设计都回归教材和中学教学实际，操作性强。 2．适当设置题目难度与区分度 选择题第12题和填空题第16题以及解答题的第21题，都是综合性问题，难度较大，学生不仅要有较强的分析问题和解决问题的能力，以及扎实深厚的数学基本功，而且还要掌握必须的数学思想与方法，否则在有限的时间内，很难完成。 3．布局合理，考查全面，着重数学方法和数学思想的考察 在选择题，填空题，解答题和三选一问题中，试卷均对高中数学中的重点内容进行了反复考查。包括函数，三角函数，数列、立体几何、概率统计、解析几何、导数等几大版块问题。这些问题都是以知识为载体，立意于能力，让数学思想方法和数学思维方式贯穿于整个试题的解答过程之中。 二、亮点试题分析 1．【试卷原题】11.已知,,A B C 是单位圆上互不相同的三点，且满足AB AC → → =，则A BA C →→ ?的最小值为（ ） A ．1 4- B ．12- C ．34- D ．1-
AngularJS -自定义指令
AngularJS - 自定义指令 这一篇从自定义指令出发，记录了定义一个指令时影响指令行为的各种因素。 试着感受这些因素，让自己更高效地编写AngularJS应用。 Directive 先从定义一个简单的指令开始。定义一个指令本质上是在HTML中通过元素、属性、类或注释来添加功能。 AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。 这里我们先使用my作为前缀: var myApp = angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, template: 'Kavlez ' }; }) 如此一来，我们可以这样使用，注意命名是camel-case:
也就是元素（E）、属性（A）、类（C）、注释（M） (ps:EMAC? EMACS? 挺好记哈) 比如上面定义的myDirective，可以以任何形式调用。 ?E（元素） ?