Angular js一些html 应用教学!

**AngularJS HTML 应用教学** AngularJS 是一个强大的JavaScript框架，主要用于构建动态网页应用。它将HTML扩展为模板语言，允许开发者在HTML中嵌入逻辑和数据绑定，极大地简化了前端开发工作。本教学主要关注AngularJS在HTML中的应用，帮助你掌握这一核心技术。 ### 1. 数据绑定 AngularJS的核心特性之一是双向数据绑定，它让视图和模型之间保持同步。在HTML中，你可以使用`ng-model`指令将输入元素与应用的模型数据关联起来。例如： ```html <input type="text" ng-model="username" placeholder="请输入用户名"> <p>用户名: {{username}}</p> ``` 当用户在输入框中输入时，`username`模型会实时更新，页面上的文本也会随之变化。 ### 2. 指令 AngularJS通过自定义HTML属性（称为指令）来扩展HTML的功能。例如： - `ng-if`：根据表达式的值决定是否渲染DOM元素。 - `ng-repeat`：用于迭代数组或对象，生成重复的DOM结构。 - `ng-click`：监听元素的点击事件，执行指定的函数。 ```html <ul> <li ng-repeat="item in items"> {{item.name}} </li> </ul> <button ng-click="addItem()">添加项</button> ``` ### 3. 表达式 AngularJS的{{ }}花括号用来插入JavaScript表达式的结果。这些表达式可以访问应用的模型数据、调用方法等。 ```html <p>总价格: {{items.length * 10}}</p> ``` ### 4. 服务 AngularJS的服务是一种可注入的对象，提供特定功能，如$http服务用于发送HTTP请求，$rootScope是全局作用域的根作用域，$timeout模拟setTimeout等。 ```javascript app.controller('MyCtrl', function($http) { $http.get('data.json').then(function(response) { this.data = response.data; }.bind(this)); }); ``` ### 5. 过滤器 过滤器用于转换数据，如格式化日期、货币等。它们可以通过管道符（|）添加到表达式中。 ```html <p>价格: {{item.price | currency}}</p> ``` ### 6. 控制器 控制器是AngularJS应用中的业务逻辑层，通过`ng-controller`指令创建。 ```html <div ng-controller="MyCtrl"> ... </div> ``` ### 7. 模块 AngularJS应用始于模块，模块定义了应用的范围，并包含相关的控制器、服务、指令等。 ```javascript var app = angular.module('myApp', []); ``` ### 8. 路由 AngularJS的路由系统（通过`ngRoute`模块）允许根据URL导航到不同的视图。 ```javascript app.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'home.html', controller: 'HomeCtrl' }) .when('/about', { templateUrl: 'about.html', controller: 'AboutCtrl' }); }); ``` 在提供的`12angularJs小例子`中，你可以找到这些概念的实际应用，通过实践加深理解。通过不断练习和学习，你将能够熟练地运用AngularJS构建复杂、交互丰富的Web应用。