最近，为了项目接触了一个很火的前端框架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：

  1. <body ng-app="ngApp">
  2.   <div ng-controller="ngCtl">
  3.     <label ng-model="myLabel"></label>
  4.     <input type="text" ng-model="myInput" />
  5.     <button ng-model="myButton" ng-click="btnClicked"></button>
  6.   </div>
  7. </body>

　　js：

  1. // angular app
  2. var app = angular.module("ngApp", [], function(){
  3.   console.log("ng-app : ngApp");
  4. });
  5. // angular controller
  6. app.controller("ngCtl", [ '$scope', function($scope){
  7.   console.log("ng-controller : ngCtl");
  8.   $scope.myLabel = "text for label";
  9.   $scope.myInput = "text for input";
  10.   $scope.btnClicked = function() {
  11.     console.log("Label is " + $scope.myLabel);
  12.   }
  13. }]);

　　在html中，我们用ng-model关键字将label和input栏中的数据，和js中controller里模型中的数据绑定在了一起。

　　只要view里的数据改变，model中的数据也会改变。反之，也成立。

　　这就是双向数据绑定！很酷吧！

　　2.指令：能够自定义你想要的指令，去控制DOM元素、实现语义化标签等。举个简单的小栗子：

　　在myapp模块下，我们编写了一个helloworld指令。

  1. var app = angular.module('myapp', []);
  2.  
  3. app.directive('helloWorld', function() {
  4.   return {
  5.       restrict: 'AE',
  6.       replace: 'true',
  7.       template: '<h3>Hello World!!</h3>'
  8.   };
  9. });

　　这样，我们在html中就能使用它了。

  1. <hello-world/>
  2. //OR
  3. <hello:world/>

　　最后，通过指令执行机制，

  1. <hello-world/>
  2. //OR
  3. <hello:world/>

　会被解析成template中的

  1. <h3>Hello World!!</h3>

　　当然，angular也内置了很多指令供大家调用，如ng-click、ng-show、ng-model 等。

　　3.控制器：AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。如：定义scope供视图层调用数据模型，暴露一组模型处理函数供外层调用等。

　　控制器的定义如下：

  1. <script>
  2. function studentController($scope) {
  3.   $scope.student = {
  4.    firstName: "yiibai",
  5.    lastName: "com",
  6.    fullName: function() {
  7.      var studentObject;
  8.      studentObject = $scope.student;
  9.      return studentObject.firstName + " " + studentObject.lastName;
  10.    }
  11.   };
  12. }
  13. </script>
  • studentController 定义 $scope 作为JavaScript对象参数。
  • $scope 表示应用程序，使用studentController对象。
  • $scope.student 是studentController对象的属性。
  • firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
  • fullName 是$scope.student对象的函数，它的任务是返回合并的名称。
  • 在fullName函数中，我们现在要学生对象返回组合的名字。
  • 作为一个说明，还可以定义控制器对象在单独的JS文件，并把有关文件中的HTML页面。
  • 下面是整个前后台代码：
    1. <html>
    2. <head>
    3. <title>Angular JS Controller</title>
    4. </head>
    5. <body>
    6. <h2>AngularJS Sample Application</h2>
    7. <div ng-app="" ng-controller="studentController">
    8.  
    9. Enter first name: <input type="text" ng-model="student.firstName"><br><br>
    10. Enter last name: <input type="text" ng-model="student.lastName"><br>
    11. <br>
    12. You are entering: {{student.fullName()}}
    13. </div>
    14. <script>
    15. function studentController($scope) {
    16.   $scope.student = {
    17.    firstName: "Mahesh",
    18.    lastName: "Parashar",
    19.    fullName: function() {
    20.      var studentObject;
    21.      studentObject = $scope.student;
    22.      return studentObject.firstName + " " + studentObject.lastName;
    23.    }
    24.   };
    25. }
    26. </script>
    27. <script src="/ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    28. </body>
    29. </html>

    　　我们通过ng-model进行数据绑定，将控制器scope范围下的student信息绑定到view里，最终输出student的fullname。　

　　4.服务：负责为控制器提供服务接口，angular内置了如$http服务用来进行服务器交互等。

　　下面，我们举个复杂点的例子，用来调用GitHub的API。

　　我们利用factory创建了一个服务，名叫githubService， 再利用$http服务通过JSONP方式去调用github的api。

  1. angular.module('myApp.services', [])
  2.   .factory('githubService', ['$http', function($http) { 
  3.  
  4.     var doRequest = function(username, path) {
  5.       return $http({
  6.         method: 'JSONP',
  7.         url: 'https://api.github.com/users/' + username + '/' + path + '?callback=JSON_CALLBACK'
  8.       });
  9.     }
  10.     return {
  11.       events: function(username) { return doRequest(username, 'events'); },
  12.     };
  13.   }]);

　　我们创建了一个只有一个方法的GitHub Service，events可以获取到给定的GitHub用户最新的GitHub事件，为了把这个服务添加到我们的controller中。

　　我们建立一 个controller并加载（或者注入）githubService作为运行时依赖，我们把service的名字作为参数传递给controller 函数（使用中括号[])。

  1. app.controller('ServiceController', ['$scope', 'githubService',
  2.     function($scope, githubService) {
  3. }]);

　　我们的githubService注入到我们的ServiceController后，我们就可以像使用其他服务（我们前面提到的$http服务）一样的使用githubService了。

　　我们来修改一下我们的示例代码，对于我们视图中给出的GitHub用户名，调用GitHub API，我们绑定username属性到视图中。

  1. <div ng-controller="ServiceController">
  2.   <label for="username">Type in a GitHub username</label>
  3.   <input type="text" ng-model="username" placeholder="Enter a GitHub username, like auser" />
  4.   <pre ng-show="username">{{ events }}</pre>
  5. </div>

　　现在我们可以监视 $scope.username属性，基于双向数据绑定，只要我们修改了视图，对应的model数据也会修改。

  1. app.controller('ServiceController', ['$scope', 'githubService',
  2.     function($scope, githubService) {
  3.     // Watch for changes on the username property.
  4.     // If there is a change, run the function
  5.     $scope.$watch('username', function(newUsername) {
  6.             // uses the $http service to call the GitHub API
  7.             // and returns the resulting promise
  8.       githubService.events(newUsername)
  9.         .success(function(data, status, headers) {
  10.                     // the success function wraps the response in data
  11.                     // so we need to call data.data to fetch the raw data
  12.           $scope.events = data.data;
  13.         })
  14.     });
  15. }]);

　　因为返回了$http promise，我们可以像直接调用$http service一样的去调用.success方法。

　　这里，我们简单地介绍了angualr几个核心的模块组件，如果你对angualr产生了兴趣，还有很多有趣的东西等待着你去研究。

　　最后，我想和大家聊聊移动端Web app开发的非原生框架：Node+Angular+Phonegap。

　　如果大家是做Web网站开发的，或许没有接触过移动端的开发，你想开发一款app，能在android和ios上运行，那么你可以快速地应用这套框架上手！

　　如果大家是做android或ios的，或许对Web开发的前端框架、H5+css3+js不是很熟，这套框架可以加快开发的效率，减少开发成本，但性能应该不如原生。

　　由于，最近开发的项目利用了这套框架，想在短期内做出来，但没有开发经验，想问问有相关开发经验的大牛们，app的性能怎样？如何做性能优化？在开发过程中要注意些什么？

　　在此感谢了~~~~

　　

　　　　

 

　　

　　

　　

　　

　　

Angular.js！（附：聊聊非原生框架项目）的更多相关文章

  1. {{angular.js 使用技巧}} - 基于验证框架的扩展（w5cValidator）

    开场白: angular.js 是谷歌出的前端js MV*框架,我也是今年做 worktile 的时候才开始接触的,起初技术选型的时候还准备使用 backbone(毕竟很多大公司在使用他,而且也是比较 ...

  2. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  3. Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. Angular.js 入门（一）

    最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...

  5. Django+uwsgi+nginx+angular.js项目部署

    这次部署的前后端分离的项目: 前端采用angular.js,后端采用Django(restframework),他俩之间主要以json数据作为交互 Django+uwsgi的配置可以参考我之前的博客: ...

  6. IOS-在ARC项目中使用非ARC框架或者类库

    1.在ARC项目中使用非ARC框架或者类库 IOS 4引入了Automatic Reference Count(ARC),编译器可以在编译时对obj-c对象进行内存管理. 之前,obj-c的内存管理方 ...

  7. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

  8. js框架——angular.js(6)

    1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...

  9. js框架——angular.js（5）

    1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...

随机推荐

  1. diff命令参数

    diff命令参数: diff - 找出两个文件的不同点 总览 diff [选项] 源文件 目标文件 描述 在最简单的情况是, diff 比较两个文件的内容 (源文件 和 目标文件). 文件名可以是 - ...

  2. UVa 10176 - Ocean Deep ! - Make it shallow !!

    题目大意:判断一个很大的二进制能否被131071整除.在二进制转十进制的过程中不断取模,最后判断结果是否是0就可以了. #include <cstdio> #include <cst ...

  3. 1、安卓数据存储机制——sharedPreference

    项目中用到的数据存储方式: 1.这个项目里的“个人标签“.”个性签名“页面的文字存储——sharedPreference:我们项目中用到的Preference来保存用户编辑的标签.签名内容,并支持用户 ...

  4. nginx 判断访问文件或目录不存在rewrite

    文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* -d和!-d用来判断是否存在目录* -e和!-e用来判断是否存在文件或目录* -x和!-x用来判断文件是否可执行样例 : 判断访问的图片是 ...

  5. VC创建多级目录

    BOOL ForceCreateDirectory(string strDir)  {    BOOL bRet = FALSE;    //确保以"\"结尾,以创建最后一个目录  ...

  6. Dictionary使用（转）

    1.要使用Dictionary集合,需要导入C#泛型命名空间 System.Collections.Generic(程序集:mscorlib)2.描述 1).从一组键(Key)到一组值(Value)的 ...

  7. iOS 日期时间控件

    UIDatePicker *picker = [[UIDatePicker alloc]initWithFrame:CGRectMake(0, 0,[UIParam widthScreen] ,50 ...

  8. Java Des加解密方法（c#加密Java解密）

    最近我们用Java把一个用.net编写的老系统重新做了翻版,但是登录还是用.net的登录.这样就会遇到一个比较棘手的问题,我们登录用的cookie信息都是.net用des加密的,但我们不得不用Java ...

  9. 1.4.2.1. FILES（Core Data 应用程序实践指南）

    #define debug 1 #pragma mark - FILES NSString *storeFilename = @"Grocery-Dude.sqlite";

  10. delphi中获得进程列表或想要的进程(枚举进程、遍历进程)

    一个常见的编程任务是枚举所有运行的"应用程序".Windows 任务管理器就是一个很好的例子.它用两种方式列出"应用程序".任务管理器的第一个选项卡列出桌面上的 ...