最近，为了项目接触了一个很火的前端框架Angular.js，下面就Angular做一个简介吧（大牛请绕步，只针对没有接触过angular的人）。
Angular.js是一款精简的前端框架，如果要追溯它的起源，它是2009年Google Feedback项目团队的一个成员Misko Hevery，在两周内重写的一个开源库，把原先的17000行前端代码精简到1500行！你怕不怕？
AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。如果你是一个jquery控，你也可以在angular中尽情地使用jquery，因为angular封装了jquery类库。那么，为什么angular这么火呢？
我认为关键在于它的精简，比如：
1.双向数据绑定：能使模型（model）和视图（view）进行数据同步，而免去了复杂的js语句。举个例子吧：
html：
<body ng-app="ngApp"> <div ng-controller="ngCtl"> <label ng-model="myLabel"></label> <input type="text" ng-model="myInput" /> <button ng-model="myButton" ng-click="btnClicked"></button> </div> </body>
js：
// angular app var app = angular.module("ngApp", [], function(){ console.log("ng-app : ngApp"); }); // angular controller app.controller("ngCtl", [ '$scope', function($scope){ console.log("ng-controller : ngCtl"); $scope.myLabel = "text for label"; $scope.myInput = "text for input"; $scope.btnClicked = function() { console.log("Label is " + $scope.myLabel); } }]);
在html中，我们用ng-model关键字将label和input栏中的数据，和js中controller里模型中的数据绑定在了一起。
只要view里的数据改变，model中的数据也会改变。反之，也成立。
这就是双向数据绑定！很酷吧！
2.指令：能够自定义你想要的指令，去控制DOM元素、实现语义化标签等。举个简单的小栗子：
在myapp模块下，我们编写了一个helloworld指令。
var app = angular.module('myapp', []); app.directive('helloWorld', function() { return { restrict: 'AE', replace: 'true', template: '<h3>Hello World!!</h3>' }; });
这样，我们在html中就能使用它了。
<hello-world/> //OR <hello:world/>
最后，通过指令执行机制，
<hello-world/> //OR <hello:world/>
会被解析成template中的
<h3>Hello World!!</h3>
当然，angular也内置了很多指令供大家调用，如ng-click、ng-show、ng-model 等。
3.控制器：AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。如：定义scope供视图层调用数据模型，暴露一组模型处理函数供外层调用等。
控制器的定义如下：
<script> function studentController($scope) { $scope.student = { firstName: "yiibai", lastName: "com", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script>
- studentController 定义 $scope 作为JavaScript对象参数。
- $scope 表示应用程序，使用studentController对象。
- $scope.student 是studentController对象的属性。
- firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
- fullName 是$scope.student对象的函数，它的任务是返回合并的名称。
- 在fullName函数中，我们现在要学生对象返回组合的名字。
- 作为一个说明，还可以定义控制器对象在单独的JS文件，并把有关文件中的HTML页面。
- 下面是整个前后台代码：
-
<html> <head> <title>Angular JS Controller</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app="" ng-controller="studentController"> Enter first name: <input type="text" ng-model="student.firstName"><br><br> Enter last name: <input type="text" ng-model="student.lastName"><br> <br> You are entering: {{student.fullName()}} </div> <script> function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script> <script src="/ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body> </html>
我们通过ng-model进行数据绑定，将控制器scope范围下的student信息绑定到view里，最终输出student的fullname。
4.服务：负责为控制器提供服务接口，angular内置了如$http服务用来进行服务器交互等。
下面，我们举个复杂点的例子，用来调用GitHub的API。
我们利用factory创建了一个服务，名叫githubService， 再利用$http服务通过JSONP方式去调用github的api。
angular.module('myApp.services', [])
.factory('githubService', ['$http', function($http) {
var doRequest = function(username, path) {
return $http({
method: 'JSONP',
url: 'https://api.github.com/users/' + username + '/' + path + '?callback=JSON_CALLBACK'
});
}
return {
events: function(username) { return doRequest(username, 'events'); },
};
}]);
我们创建了一个只有一个方法的GitHub Service，events可以获取到给定的GitHub用户最新的GitHub事件，为了把这个服务添加到我们的controller中。
我们建立一 个controller并加载（或者注入）githubService作为运行时依赖，我们把service的名字作为参数传递给controller 函数（使用中括号[])。
app.controller('ServiceController', ['$scope', 'githubService',
function($scope, githubService) {
}]);
我们的githubService注入到我们的ServiceController后，我们就可以像使用其他服务（我们前面提到的$http服务）一样的使用githubService了。
我们来修改一下我们的示例代码，对于我们视图中给出的GitHub用户名，调用GitHub API，我们绑定username属性到视图中。
<div ng-controller="ServiceController"> <label for="username">Type in a GitHub username</label> <input type="text" ng-model="username" placeholder="Enter a GitHub username, like auser" /> <pre ng-show="username">{{ events }}</pre> </div>
现在我们可以监视 $scope.username属性，基于双向数据绑定，只要我们修改了视图，对应的model数据也会修改。
app.controller('ServiceController', ['$scope', 'githubService',
function($scope, githubService) {
// Watch for changes on the username property.
// If there is a change, run the function
$scope.$watch('username', function(newUsername) {
// uses the $http service to call the GitHub API
// and returns the resulting promise
githubService.events(newUsername)
.success(function(data, status, headers) {
// the success function wraps the response in data
// so we need to call data.data to fetch the raw data
$scope.events = data.data;
})
});
}]);
因为返回了$http promise，我们可以像直接调用$http service一样的去调用.success方法。
这里，我们简单地介绍了angualr几个核心的模块组件，如果你对angualr产生了兴趣，还有很多有趣的东西等待着你去研究。
最后，我想和大家聊聊移动端Web app开发的非原生框架：Node+Angular+Phonegap。
如果大家是做Web网站开发的，或许没有接触过移动端的开发，你想开发一款app，能在android和ios上运行，那么你可以快速地应用这套框架上手！
如果大家是做android或ios的，或许对Web开发的前端框架、H5+css3+js不是很熟，这套框架可以加快开发的效率，减少开发成本，但性能应该不如原生。
由于，最近开发的项目利用了这套框架，想在短期内做出来，但没有开发经验，想问问有相关开发经验的大牛们，app的性能怎样？如何做性能优化？在开发过程中要注意些什么？
在此感谢了~~~~