Angular.js！（附：聊聊非原生框架项目）

时间 2020-07-12

标签 angular.js angular 聊聊原生框架项目栏目 AngularJS 繁體版

原文原文链接

　　最近，为了项目接触了一个很火的前端框架Angular.js，下面就Angular作一个简介吧（大牛请绕步，只针对没有接触过angular的人）。css

　　Angular.js是一款精简的前端框架，若是要追溯它的起源，它是2009年Google Feedback项目团队的一个成员Misko Hevery，在两周内重写的一个开源库，把原先的17000行前端代码精简到1500行！你怕不怕？html

　　AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。若是你是一个jquery控，你也能够在angular中尽情地使用jquery，由于angular封装了jquery类库。那么，为何angular这么火呢？前端

　　我认为关键在于它的精简，好比：jquery

　　1.双向数据绑定：能使模型（model）和视图（view）进行数据同步，而免去了复杂的js语句。举个例子吧：android

　　html：ios

<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：css3

// 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里模型中的数据绑定在了一块儿。git

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

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

　　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的性能怎样？如何作性能优化？在开发过程当中要注意些什么？

　　在此感谢了~~~~