源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AngularJS学习第一篇 AngularJS基础知识

  • 时间:2021-05-22 22:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AngularJS学习第一篇 AngularJS基础知识
AngularJS学习第一篇,了解指令、过滤器等相关内容。 [b]指令[/b] AngularJS 指令是扩展的 HTML 属性,带有前缀 ng- [b]1、 ng-app:[/b] 定义了 AngularJS 应用程序的根元素; ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序;
<div ng-app="Demo"></div>
[b]2、 ng-init:[/b] 为 AngularJS 应用程序定义了 初始值; 通常情况下,我们使用一个控制器或模块来代替它;
<div ng-app="Demo" ng-init="firstName='John'">
 <p>我的名字是:{{ firstName }}</p>
</div>
[b]3、 ng-model:[/b] 绑定 HTML 元素 到应用程序数据 同时也可以:       为应用程序数据提供类型验证(number、email、required);       为应用程序数据提供状态(invalid、dirty、touched、error);      为HTML 元素提供 CSS 类;      绑定 HTML 元素到 HTML 表单;
<div ng-app="Demo" ng-init="firstName='John'">
 <p>姓名:<input type="text" ng-model="firstName"></p>
 <p>我的名字是:{{ firstName }}</p>
</div>
[b]4、ng-repeat:[/b]对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
<div ng-app="Demo" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 <ul>
   <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
   </li>
 </ul>
</div> 
[b]5、ng-controller:[/b]为应用程序添加控制器。请根据下面示例进行了解:
<div ng-app="Demo">
 <h1 ng-controller="DemoCtrl">{{name}}</h1>
 <h1 ng-controller="DemoCtrl2">{{lastName}}</h1>
</div>
<script>
 // $scope表示作用区域,指向当前controller
 // 每个应用都有一个$rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定义的值,可以在各个 controller 中使用。
 var app = angular.module('Demo', []);
 app.controller('DemoCtrl', function($scope, $rootScope) {
  $scope.name = "Volvo";
  $rootScope.lastName = "Tom";
 });
</script>
<div ng-app="Demo" ng-controller="personCtrl">
 名: <input type="text" ng-model="firstName">
 <br>
 姓: <input type="text" ng-model="lastName">
 <br>
 姓名: {{fullName()}}
</div>
<script>
 var app = angular.module('Demo', []);
 app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
   return $scope.firstName + " " + $scope.lastName;
  }
 });
</script>
[b]6、ng-options:[/b]创建一个下拉列表,列表项通过对象和数组循环输出。
<div ng-app="Demo" ng-controller="DemoCtrl">
 <select ng-model="selectedName" ng-options="x for x in names">
 </select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.names = ["Google", "W3Cschool", "Taobao"];
});
</script>
[b]7、ng-disabled:[/b]指令直接绑定应用程序数据到 HTML 的 disabled 属性。
<div ng-app="" ng-init="mySwitch=true">
 <button ng-disabled="mySwitch">点我!</button>
 <input type="checkbox" ng-model="mySwitch"/>按钮
 {{ mySwitch }}
</div> 
[b]8、ng-show:[/b]指令隐藏或显示一个 HTML 元素。
<div ng-app="">
 <p ng-show="true">我是可见的。</p>
 <p ng-show="false">我是不可见的。</p>
</div> 
[b]9、ng-click:[/b]指令定义了一个 AngularJS 单击事件。
<div ng-app="Demo" ng-controller="myController">
 <button ng-click="count = count + 1">点我!</button>
 <p>{{ count }}</p>
</div>
[b]10、ng-include:[/b]使用 ng-include 指令来包含 HTML 内容。 [b]过滤器[/b] 使用一个管道字符(|)添加到表达式和指令中 常见表达式: currency:格式化数字为货币格式; filter:从数组项中选择一个子集; lowercase:格式化字符串为小写; orderBy:根据某个表达式排列数组; uppercase:格式化字符串为大写;
<div ng-app="Demo" ng-controller="DemoCtrl">
 <p>姓名为 {{ lastName | uppercase }}</p>
</div>

<div ng-app="Demo" ng-controller="DemoCtrl">
 <ul>
 <li ng-repeat="x in names | orderBy:'country'">
  {{ x.name + ', ' + x.country }}
 </li>
 </ul>
</div>
[b]服务[/b] 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用; AngularJS 中你可以创建自己的服务,或使用内建服务; AngularJS 内建了30 多个服务; 自定义服务
app.service('hexafy', function() {
 this.myFunc = function (x) {
 return x.toString(16);
 }
});
var app = angular.module('Demo', []);
app.controller('customersCtrl', function($scope, $location) {
 $scope.myUrl = $location.absUrl();
}); 
[b]常用内置服务[/b][b] [/b] 1、$http:是 AngularJS 中的一个核心服务。服务向服务器发送请求,应用响应服务器传送过来的数据;
var app = angular.module('Demo', []);
app.controller('DemoCtrl', function($scope, $http) {
 $http({
 url:'data.json',
 method:'GET',
 params:{
  'username':'tan'
 }
 }).success(function(data,header,config,status){
 //响应成功
 }).error(function(data,header,config,status){
 //处理响应失败
 });
});


2、$location:服务对应了 window.location 函数。 3、$timeout:服务对应了 window.setTimeout 函数。 4、$interval:服务对应了 window.setInterval 函数。 5、$rootScope:它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定义的值,可以在各个 controller 中使用。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部