ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

AngularJs前端基础个人学习总结

2021-06-04 10:58:10  阅读：199  来源： 互联网

标签：总结 function myApp 前端 angular controller AngularJs scope app


AngularJs

1.数据绑定

<!--
ng-app属性声明所有被其包含的内容都属于这个AngularJS应用
只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响
-->
<html ng-app>

<head>
    <meta charset="utf-8">
    <title>Simple app</title>
    <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body> 
<!--
ng-model相当于vue中的v-model，绑定变量名称name，从而达到数据动态绑定的功能

该绑定是单向绑定，model是ng-model中的name变量，view是<h1>中的{{}}

单向绑定：通过改变model，从而改变view，{{}}就是很好的单向绑定的例子
-->
	<input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>
</body>

</html>

同样的，ng-model还可以用来绑定对象的某个属性，从而达到从服务器获取数据，绑定到前端的功能。

<div ng-controller='MyController'>
  <!--person为数据对象，name为该对象的属性，person通过ng-controller绑定的控制器获取返回的数据-->
  <input ng-model="person.name" type="text" placeholder="Your name">
  <h1>Hello {{ person.name }}</h1> 
</div>

2.指令

  1. ng-app 指令初始化一个 AngularJS 应用程序，只有包含在该元素下的元素才能识别AngularJS
  2. ng-init 指令初始化应用程序数据。
  3. ng-model 数据绑定
    示例：
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

</body>
</html>
  1. ng-repeat 相当于vue中的v-for，循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="person=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in person">
  {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>
  1. ng-click点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count(2)">点我！</button>

<p>{{ count2 }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count2 = 0;
    $scope.count = function(num){
        $scope.count2+=num;
    }
});
</script>

</body>
</html>

3.作用域Scope

  1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。它是一个对象，有自己的属性和方法
  2. 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volv1o";
});
</script>


</body>
</html>

4.根作用域rootScope

  1. 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
<!--$rootScope可以作为参数传递-->
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

<p>注意 $rootScope 在循环对象内外都可以访问。</p>

</body>
</html>

5.模块module

  1. 指定当前模块的值来源于哪个控制器，如上图所示。指定当前控制器绑定的是myApp模块。

6.控制器controller

  1. 指明当前域的值是交由哪个控制器处理获得。当然，控制器也可以有自己的方法(变量和函数)。
<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

7.过滤器 |

  1. 常见的5种过滤器
过滤器描述
currency格式化数字为货币格式
filter从数组项中选择一个子集
lowercase格式化字符串为小写
orderBy根据某个表达式排列数组
uppercase格式化字符串为大写
  1. 使用方法
    可以使用一个管道字符（|）添加到表达式和指令中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="/statics/demosource/namesController.js"></script>

</body>
</html>

#namesController.js
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

8.自定义过滤器

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
  <div ng-controller="MyController">{{name | firstUpper}}</div>

  <script>
    <!--指定是哪一个module-->
    var m1 = angular.module('myApp', []);
    <!--为该module构建自己的过滤器-->
    m1.filter('firstUpper', function(){
      return function(str) {
        return str.charAt(0).toUpperCase() + str.substring(1);
      }
    });
    <!--定义Controller-->
    m1.controller('MyController', ['$scope', function($scope) {
      $scope.name = "test";
    }]);
  </script>
</body>
</html>

9.服务service

  1. 服务是angular内置的函数或对象，个人觉得是对javaScript的一些常用功能的封装
  2. 具体用法格式：
var app = angular.module('myApp', []);
app.controller('yourController', function($scope, '服务名') {
});
  1. $location服务
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

</body>
</html>
  1. $http服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>欢迎信息:</p>

<h1>{{data}}</h1>

</div>

<p> $http 服务向服务器请求信息，返回的值放入变量 "data" 中。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("/statics/demosource/welcome.htm").then(function (response) {
      $scope.data = response.data;
  });
});
</script>

</body>
</html>
  1. 自定义服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务，用于转换16进制数：</p>

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

</body>
</html>
  1. 其他服务

10.select选择框

  1. //TODO没搞清楚这个ng-model绑定的b到底是怎么来的，为什么会凭空出现一个b，他绑定的到底是那里的值？
  2. 经过测试,发现ng-model取名是什么都没关系，估计它绑定的是ng-options中for循环遍历的每一个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="b" ng-options="x.a for x in sites">
</select>

<h1>你选择的是: {{b.a}}</h1>
<p>网址为: {{b.url}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {a: "Google", url : "http://www.google.com"},
	    {a : "W3CSchool", url : "http://www.w3cschool.cn"},
	    {a : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

<p>该实例演示了使用 ng-options  指令来创建下拉列表，选中的值是一个对象。</p>
</body>
</html>

11.表格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd)	{
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
     <td>{{ $index + 1 }}</td>  ---序号
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/statics/demosource/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

12.表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

</body>
</html>

13.依赖注入核心组件

  1. value
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="value" placeholder="请输入需要乘于3的值"></input>
    <h2>hex值是：{{hex()}}</h2>
  </div>

  <script>
    var myApp = angular.module("myApp", []);
	
	//定义value
    myApp.value("defaultValue",3);

     // 通过factory创建MathService。实际上用service也行
     myApp.service('MathService', function (defaultValue) {
       var MathService = {};

        MathService.value = function(x){
          return x*defaultValue;
        };

        return MathService;
    });

    myApp.controller("myCtrl",function($scope,MathService){
      $scope.value = 0;
      $scope.hex = function(){
        return MathService.value($scope.value);
      }
    });

  </script>

</body>

</html>
  1. service
  2. factory
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="firstName" placeholder="请输入需要求平方的值"></input>
    <h2>hex值是：{{hex()}}</h2>
  </div>

  <script>
    var mainApp = angular.module("myApp", []);

    // 通过factory创建MathService。实际上用service也行
    mainApp.factory('MathService', function () {
      var factory = {};

      factory.multiply = function (a, b) {
        return a * b
      }
      return factory;
    });

    // 通过service创建CalService。要调用哪个服务就在function加上哪个服务的参数
    mainApp.service('CalcService', function (MathService) {
      this.square = function (a) {
        return MathService.multiply(a, a);
      }
    });
	
	//将服务注入到controller
    mainApp.controller('myCtrl', function ($scope, CalcService) {
      $scope.firstName = 2;
      $scope.hex = function(){
        return CalcService.square(parseInt($scope.firstName));
      }
    });

  </script>

</body>

</html>
  1. provider
  2. constant
    详细说明见：W3C依赖注入说明

14.AngularJs路由

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入angularJS -->
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!-- 引入angular路由 -->
<script src="//apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
//引入ngRoute路由组件
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope) { $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> 欲上青天揽明月 </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> 把酒问青天 </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      <!-- 相当于vue中的路由占位符,页面内容会被替换放到这里展示 -->
    <div ng-view="">
    </div>
  </div>
</body>
</html>

标签：总结,function,myApp,前端,angular,controller,AngularJs,scope,app
来源： https://blog.csdn.net/ptGrapes/article/details/117509392

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有