angular---代码详解(第一篇)
来源：互联网 发布：淘宝一键模板 编辑：程序博客网 时间：2024/06/05 07:23
1.1:简要
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS 模块化</title></head><body> <!-- 指定模块 --> <!-- 一个页可以有多个模块，但是不能互想嵌套 --> <!-- 一般只会有一个 --> <div class="box" ng-app="App"> <!-- 指定控制器 --> <div ng-controller="DemoContoller"> <h1>{{name}}在{{school}}学习使用AngularJS</h1> <ul> <li ng-repeat="(key, course) in courses">第{{key+1}}天：{{course}}</li> </ul> </div> </div> <!-- 引入框架 --> <script src="./libs/angular.min.js"></script> <script> // 提供一个全局对象angular，在此对象下有N多方法 // 其中module方法可以帮我们创建一个模块 var App = angular.module('App', []); // App就是新创建的模块，这个模块又是一个对象 // 在此对象下又有N多方法，可以实现具体业务逻辑 // 其它controller可以创建一个控制器 App.controller('DemoContoller', ['$scope', function ($scope) { // $scope 是一个空对象{}，此对象就是Model $scope.name = '强'; $scope.school = '北京邮电'; $scope.courses = [ 'MVC', '指令', '模块化' ] }]); </script></body></html>
2.1演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS 模块化</title></head><body ng-app="Demo"> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody ng-controller="StarsController"> <tr ng-repeat="star in stars"> <td>{{star.name}}</td> <td>{{star.sex}}</td> <td>{{star.age}}</td> </tr> </tbody> </table> <script src="./libs/angular.min.js"></script> <script> // 定义一个模块 var Demo = angular.module('Demo', []); // 定义控制器 Demo.controller('StarsController', ['$scope', function ($scope) { // $scope 就是 Model 并且空对象 // 后面数据会来自于后端 $scope.stars = [ {name: '刘德华', sex: '男', age: 62}, {name: '王力宏', sex: '男', age: 40}, {name: '周杰伦', sex: '男', age: 39}, {name: '小明', sex: '女', age: 12} ]; }]); </script> <!-- 模块 --> <!-- 每个模块基于MVC --></body></html>
3.1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS 指令</title> <!-- <link rel="stylesheet" ng-href="{{link}}"> --> <style> .red { color: red; } .blue { color: blue; } </style></head><body ng-app="App"> <ul ng-controller="DemoController"> <li ng-bind="name"></li> <li>{{name}}</li> <li ng-show="1">ng-show用来显示或隐藏内容的，当值为true时显示</li> <li ng-hide="0">ng-hide用来显示或隐藏内容的，当值为true时隐藏</li> <li ng-if="1">ng-if用来控制元素是否存在，当值为true时存在</li> <li><img ng-src="{{path}}" alt=""></li> <li ng-class="{red: true, blue: true}">ng-class指令</li> <li><input type="text" ng-disabled="0"></li> <li><input type="text" ng-readonly="1" value="angular"></li> <li><input type="checkbox" ng-checked="1">男</li> <li> <select name="" id=""> <option value="">河北省</option> <option value="">山东省</option> <option value="" ng-selected="1">北京市</option> </select> </li> </ul> <script src="./libs/angular.min.js"></script> <script> // 创建模块 var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { // $scope $scope.name = 'itcast'; $scope.path = './images/author.jpg'; $scope.link = './main.css'; }]); </script></body></html>
3.2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS 自定义指令</title></head><body ng-app="App"> <!-- <div tag></div> --> <!-- 元素 --> <!-- <tag></tag> --> <!-- <div class="tag"></div> --> <!-- directive:tag --> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); // 通过模块实例对象的directive方法可以自定义指令 App.directive('tag', function () { // 返回一个对象，这个对象就是自定义指令相关的内容 return { // E element // A attribute // C class // M mark replace 必须为true restrict: 'ECMA', // template: '<ul><li>首页</li><li>列表</li></ul>', templateUrl: './list.html', // replace: true } }); </script></body></html>
4.1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS 数据绑定</title></head><body ng-app="App"> <ul ng-controller="DemoController"> <li ng-bind="name"></li> <li ng-cloak>{{name}}{{age}}</li> <li ng-bind-template="{{name}}{{age}}"></li> </ul> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { // $scope 就是Model $scope.name = 'itcast'; $scope.age = 10; }]); </script></body></html>
4.2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularJS 数据绑定</title></head><body ng-app="App"> <div ng-controller="DemoController"> <!-- 要实现数据从视图向模型传递需要借助于表单元素 --> <input type="text" ng-model="msg"> <h4>{{msg}}</h4> <button ng-click="show()">显示</button> </div> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { // $scope Model $scope.show = function () { alert($scope.msg); } }]); </script></body></html>
4.3<!DOCTYPE html><html lang="en" ng-app="App"><head> <meta charset="UTF-8"> <title>AngularJS 数据绑定</title></head><body> <div ng-controller="DemoController" ng-init="name='itcast';age=10"> <h1>{{name}}</h1> <h2>{{age}}</h2> </div> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope){ // $scope.name = ''; }]) </script></body></html>
4.4<!DOCTYPE html><html lang="en" ng-app="App"><head> <meta charset="UTF-8"> <title>AngularJS 数据绑定</title> <style> ul { list-style: none; } </style></head><body> <div ng-controller="DemoController"> <ul> <li><button ng-click="single()">单击</button></li> <li><button ng-dblclick="double()">双击</button></li> <li><input type="text" ng-blur="blur()"></li> <li ng-mouseout="mouseout()">一些内容</li> </ul> </div> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { $scope.single = function () { alert('我被单击了'); } $scope.double = function () { alert('我被双击了'); } $scope.blur = function () { alert('失去焦点了'); } $scope.mouseout = function () { alert('鼠标移出了'); } }]) </script></body></html>
4.5<!DOCTYPE html><html lang="en" ng-app="App"><head> <meta charset="UTF-8"> <title>AngularJS 数据绑定</title></head><body> <div ng-controller="DemoController"> <!-- <ul> <li ng-repeat="(key, star) in stars">{{star.name}}{{star.age}}</li> </ul> --> <ul> <li ng-repeat="item in items" ng-switch="item"> <span ng-switch-when="css">{{item}}</span> </li> </ul> </div> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); App.controller('DemoController', ['$scope', function ($scope) { // $scope.stars = [ // {name: '刘德华', age: 60}, // {name: '周杰伦', age: 38}, // {name: '王力宏', age: 39} // ] $scope.items = ['html', 'css', 'js']; }]); // switch(name) { // case '': // } </script></body></html>
5.1 <!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title>AngularJS 根作用域</title></head><body ng-app="App" ng-init="name='顺治'"> <div class="parent" ng-controller="ParentController"> <h1>{{name}}</h1> <div class="child" ng-controller="ChildController"> <h2>{{name}}</h2> </div> </div> <script src="./libs/angular.min.js"></script> <script> var App = angular.module('App', []); App.controller('ParentController', ['$scope', function ($scope) { // $scope.name = '康熙'; }]); App.controller('ChildController', ['$scope', function ($scope) { $scope.name = '雍正'; }]); var name = '小明'; // function () { // var name = '小红'; // alert(name); // function () { // var name = '小黑'; // } // } </script></body></html>
1 0
- angular---代码详解(第一篇)
- servlet详解(第一篇)
- servlet详解(第一篇)
- angular---代码详解(第二篇)
- angular---代码详解(第三篇)
- Angular 2知识整理第一篇 Hello,world!
- 第一篇投稿代码整理
- java synchronized详解---第一篇
- jsp详解（第一篇）
- 第一篇有关代码的文字
- 我的第一篇html代码
- 第一篇 博客 无关于代码
- 我的第一篇java初学代码
- C#委托和事件详解第一篇
- 第一篇 channel和channelartlist标签详解
- rabbitmq第一篇：rabbitmq安装详解
- redis第一篇：redis安装详解
- rabbitmq第一篇：rabbitmq安装详解
- Spring 上传文件（转）
- tk1 网站
- Java EE基础知识学习（四）
- 胆小如鼠 也要表白清楚
- The Ph.D Grind 前言
- angular---代码详解(第一篇)
- 信号处理—卷积
- jquery easyui实现树形(Tree)菜单点击，在content页生成Tab功能
- 算法设计与应用基础： 第四周（1）
- plsql developer提高开发效率使用技巧设置
- linux之相对路径与绝对路径
- 自定义Button之实现点击按钮实现倒计时功能
- struts漏洞解决方法
- 内部类的实例化
