angular学习

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

路由

  1. 依赖模块 ngRouter,引入文件 angular-route.js

    angular.module('myApp', ['ngRoute'])
    
  2. 使用 ngView 指令

    <div ng-view></div>
    
  3. 配置 $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 开发移动端应用

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐