最近开始使用angularjs 前端mvc框架,是一个非常好用的资源,代码实现简单,可以直接操作html,完成实现前后台代码分类。
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。
AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。
AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。
这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
AngularJS 表达式
AngularJS 表达式写在双大括号内:{{ expression }}。
AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 6 </head> 7 <body> 8 9 <div ng-app="myApp" ng-controller="myCtrl"> 10 名字: <input ng-model="name"> 11 <h1>你输入了: {{name}}</h1> 12 </div> 13 14 <script> 15 var app = angular.module('myApp', []); 16 app.controller('myCtrl', function($scope) { 17 $scope.name = "John Doe"; 18 }); 19 </script> 20 21 <p>修改输入框的值,标题的名字也会相应修改。</p> 22 23 </body> 24 </html>