angular.JS 四大特征: mvc 模式, 双向绑定, 依赖注入, 模块化设计
法则: 高内聚低耦合
1. 表达式 {{}}:
使用 angular 需要引入 < script src="angular.min.js"></script>
同时在 body 添加: ng-App
- <html>
- <head>
- <title>AngularJSDEMO-1 表达式 </title>
- <script src="angular.min.js"></script>
- </head>
- <body ng-App>
- {{100+100}}
- </body>
- </HTML>
2. 双向绑定:
- ng-model="name"
- <HTML>
- <head>
- <title>AngularJSDEMO-2 双向绑定 </title>
- <script src="angular.min.js"></script>
- </head>
- <body ng-App>
- 请输入姓名:<input ng-model="name">
- <input ng-model="name">
- {{name}}
- </body>
- </HTML>
3. 初始化指令
ng-init="name='程大海'" 将 name 初始化为程大海
- <HTML>
- <head>
- <title>AngularJSDEMO - 初始化指令 </title>
- <script src="angular.min.js"></script>
- </head>
- <body ng-App ng-init="name='程大海'">
- 请输入姓名:<input ng-model="name">
- <input ng-model="name">
- {{name}}
- </body>
- </HTML>
4. 控制器
- <HTML>
- <head>
- <title>AngularJSDEMO - 控制器 </title>
- <script src="angular.min.js"></script>
- <script>
- // 建立模块
- var App = angular.module("myApp",[])
- // 创建控制器 $scopek 控制器和视图层交互数据桥梁
- App.controller("myController",function($scope){
- $scope.add= function(){
- return parseInt( $scope.x)+parseInt($scope.y);
- }
- });
- </script>
- </head>
- <body ng-App="myApp" ng-controller="myController">
- 第一个数:<input ng-model="x">
- 第二个数:<input ng-model="y">
- {{add()}}
- </body>
- </HTML>
5, 事件指令
- <HTML>
- <head>
- <title>AngularJSDEMO-2 双向绑定 </title>
- <script src="angular.min.js"></script>
- <script>
- // 建立模块
- var App = angular.module("myApp",[])
- // 创建控制器 $scopek 控制器和视图层交互数据桥梁
- App.controller("myController",function($scope){
- $scope.add= function(){
- $scope.c= parseInt( $scope.x)+parseInt($scope.y);
- }
- });
- </script>
- </head>
- <body ng-App="myApp" ng-controller="myController">
- 第一个数:<input ng-model="x">
- 第二个数:<input ng-model="y">
- <button ng-click="add()"> 运算 </button>
- {{c}}
- </body>
- </HTML>
6, 循环数组
- <HTML>
- <head>
- <title>AngularJSDEMO 循环数组 </title>
- <script src="angular.min.js"></script>
- <script>
- // 建立模块
- var App = angular.module("myApp",[])
- // 创建控制器 $scopek 控制器和视图层交互数据桥梁
- App.controller("myController",function($scope){
- $scope.list = [102,2030,1023,123,23];
- });
- </script>
- </head>
- <body ng-App="myApp" ng-controller="myController">
- <table>
- <tr ng-repeat="x in list">
- <td>{{x}}</td>
- </tr>
- </table>
- </body>
- </HTML>
7. 循环对象数组
- <HTML>
- <head>
- <title>AngularJSDEMO 循环数组 </title>
- <script src="angular.min.js"></script>
- <script>
- // 建立模块
- var App = angular.module("myApp",[])
- // 创建控制器 $scopek 控制器和视图层交互数据桥梁
- App.controller("myController",function($scope){
- $scope.list = [
- {name:"张三",shuxue:100,yuwen:100},
- {name:"lisi",shuxue:22,yuwen:2},
- {name:"wangwu",shuxue:33,yuwen:1}]
- });
- </script>
- </head>
- <body ng-App="myApp" ng-controller="myController">
- <table>
- <tr>
- <td > 姓名 </td>
- <td > 数学 </td>
- <td > 语文 </td>
- </tr>
- <tr ng-repeat="entity in list">
- <td>{{entity.name}}</td>
- <td>{{entity.shuxue}}</td>
- <td>{{entity.yuwen }}</td>
- </tr>
- </table>
- </body>
- </HTML>
8. 内置服务
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <HTML>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>
- angular 入门小 demo
- </title>
- <script src="angular.min.js">
- </script>
- <script>
- // 建立模块
- var App = angular.module("myApp", [])
- // 创建控制器 $scopek 控制器和视图层交互数据桥梁
- App.controller("myController",
- function($scope, $http) {
- $scope.findList = function() {
- $http.get("data.json").success(function(response) {
- $scope.list = response;
- })
- }
- });
- </script>
- </head>
- <body ng-App="myapp" ng-controller="controller" ng-init="findList">
- <table>
- <tr>
- <td>
- 姓名
- </td>
- <td>
- 数学
- </td>
- <td>
- 语文
- </td>
- </tr>
- <tr ng-repeat="entity in list">
- <td>
- {{entity.name}}
- </td>
- <td>
- {{entity.shuxue}}
- </td>
- <td>
- {{entity.yuwen }}
- </td>
- </tr>
- </table>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-2973063.html