<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 开发移动端应用

angular学习

angular 入门

文章目录

angular 是什么

hello world