angular 入门
2019-7-19
这里博主入门的 是 1.x 版本,主要是原有业务的需求,现在 ag 已经出到8了,虽然版本差异较大,不过并不影响学习和使用,思想是相通的。不同的是 api 和实现的些微差异。les’t go!
文章目录
angular 是什么
- js框架
- 通过新的属性和表达式扩展 HTML
- 可以构建 SPA(单一页面应用)
- 容易上手
hello world
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
{{$text}}
</div>
</div>
<script>
// 定义 angularjs 应用,第一个参数是应用名,对应 ng-app ,第二个参数是依赖,没有则留空
var app = angular.module('myApp', [])
// 定义一个控制器,与 ng-controller 对应,$scope 是数据和视图的纽带,在控制器中定义数据,在视图中显示,是一个对象。
app.controller('myCtrl', function($scope) {
$scope.text = 'hello world angularjs!'
})
</script>
模块 module
-
模块定义应用程序
-
模块是不同应用程序中不同部分的容器
-
模块是应用程序的容器
-
控制器通常属于一个模块
依赖注入
指令 ng-*
- ng-app
- ng-controller
- ng-model 双向绑定数据
- ng-init
- ng-bing
- ng-show 显示元素块
- ng-hide
- ng-repeat 遍历数据
- ng-click 绑定 click 事件
- ng-options 与select option使用
- ng-switch、ng-switch-when
自定义指令
var app = angular.module('myApp', [])
app.directive('myDirective', function() {
return {
restrict: 'A', // 默认EA,限制调用指令的方式
template: '<h1>自定义指令</h1>'
}
})
表达式
双大括号 {{ expression }}
与 ng-bing
作用相似
控制器 controller
ng-controller
在视图(View)中定制控制器
控制器接管当前视图区域,作用域是 $scope
作用域 $scope
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象,有可用的方法和属性。
Scope 可应用在视图和控制器上。
$rootScope
是跟作用域
服务 Service
service 是一个对象或函数
加载服务,以参数形式传递给控制器 eg: function($scope, $location, $http){}
服务 | 对应功能 |
---|---|
$location | window.location |
$http | fetch |
$timeout | setTimeout |
$interval | setInterval |
… |
自定义服务
var app = angular.module('myApp', [])
// 10进制转16进制
app.service('hexafy', function() {
this.ten2hex = function() {
return x.toString(16)
}
})
// 使用自定义服务
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.ten2hex(255) // {{hex}} => ff
})
http
内置的请求服务
app.controller('myCtrl', function($scope, $http) {
$http.get('test.json')
.then(resp => {
$scope.list = resp.data.records
})
})
跟多详情查看官方文档
过滤器
过滤器 | 描述 |
---|---|
currency | 格式化数字为货币格式。 |
filter | 从数组项中选择一个子集。 |
lowercase | 格式化字符串为小写。 |
orderBy | 根据某个表达式排列数组。 |
uppercase | 格式化字符串为大写。 |
eg:
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.js"></script>
<div ng-app="myApp" ng-init="firstName='Li';lastName='Shuxing'">
姓大写:{{firstName | uppercase}} <br/>
名小写:{{lastName | lowercase}}
</div>
自定义过滤器
var app = angular.module('myApp', [])
app.filter('reverse', function() { //可以注入依赖
return function(value) {
return value.split('').reverse().join('')
}
})
事件
- ng-click
- ng-change
- ng-foucu
- ng-blur
- …
eg:
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.js"></script>
<div ng-app="myApp" ng-init="count=0">
<button ng-click="count = count - 1">-</button>
<button ng-click="count = count + 1">+</button>
<p>{{ count }}</p>
</div>
表单
表单元素 | 对应使用的指令 | 扩展 |
---|---|---|
input | ng-model | |
checkbox | ng-model | ng-show |
radio | ng-model | |
select | ng-repeat、ng-options | ng-switch,ng-switch-when |
textarea | ng-model |
路由
-
依赖模块 ngRouter,引入文件 angular-route.js
angular.module('myApp', ['ngRoute'])
-
使用 ngView 指令
<div ng-view></div>
-
配置
$routeProvider
,用于配置路由规则angular.modlue.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { template: '<h1>首页</h1>' }) .when('/computers', { template: '<h1>这是电脑分类页面</h1>' }) .otherwise({ redirectTo: '/' }) }])
路由设置对象
$routeProvider 提供 when(path, object) & otherwise(object) 函数定义路由。
- 第一个参数是 URL 或者 URL 正则
- 第二个参数是路由配置对象
$routeProvider.when(url, {
template: string, // 模板字符串 eg: <h1>首页</h1>
templateUrl: string, // 模板文件 eg: home.tpl 先请求本地,在请求后端
controller: string, function 或 array, // 当前模板执行的控制器
controllerAs: string, // 控制器别名
redirectTo: string, function, // 重定向地址 eg: www.google.cc
resolve: object<key, function> // 指定当前controller所依赖的其他模块
});
下一节
ionic + angular 开发移动端应用
原文地址:https://blog.csdn.net/example440982/article/details/96569296
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。