首页 >web前端 >js教程 >初识angularjs应该知道些什么?2018angularjs的入门必学教程(附实例讲解)

初识angularjs应该知道些什么?2018angularjs的入门必学教程(附实例讲解)

寻∝梦
寻∝梦原创
2018-09-08 14:07:441091浏览

本篇文章介绍的是angularjs的基础认识,让想学angularjs的同学有个好点的入门课程。现在就让我们一起来看看这篇文章吧。

AngularJS介绍

AngularJs是一个前台框架,使用JavaScript编写的库。用户可以在使用该框架,在前台中进行数据双向绑定,实现前端的MVC数据显示。 

  在使用AngularJs框架的时候,只需要在前台的html中引入AngularJs文件即可。使用非常方便。

AngularJs基础操作

  在讲解基础指令前,先普遍一些基础概念。用户在页面中引入AngularJs文件后,可以创建WebApp和控制器了。在 AngularJs 中,每个页面被看作一个独立的 WebApp,每个 WebApp 中可以包括多个独立的处理部分,我们称为 Controller,每个 Controller 有自己独立的处理上下文和逻辑。AngularJs 通过指令 ng-app 来划定这个 WebApp 的作用域,通常可以将这个 ng-app 直接写在 html 标记之上,也可以写在一个元素之上。例如:  

html:<p ng-app="myApp">
    <p ng-controller="myController">
    <h3>{{data}}</h3>
    </p></p>

初始化应用程序: ng-app 指令告诉 AngularJS,

元素是 AngularJS 应用程序 的”所有者”。
绑定数据: ng-model 指令把输入域的值绑定到应用程序变量 name。———绑定到属性中。也可以:为应用程序数据提供类型验证(number、email、required)。为应用程序数据提供状态(invalid、dirty、touched、error)。为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。
绑定html中的数据: ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。等价于在html中写{{变量名}}—————-绑定到text中
初始化数据: ng-init 指令初始化 AngularJS 应用程序变量。
克隆数据: ng-repeat 指令对于集合中(数组中)的每个项会克隆一次 HTML 元素。eg:ng-repeat=”x in arrays”
自定义指令: 通过使用 .directive 函数来添加自定义的指令。要调用自定义指令,HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。

eg:<body ng-app="myApp">
    <runoob-directive></runoob-directive>
    <script>
        var app = angular.module("myApp", []);
        app.directive("runoobDirective", function() {
            return {                //restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
                restrict : "A",//限制使用--E 作为元素名使用。A 作为属性使用。C 作为类名使用。M 作为注释使用
                template : "<h1>自定义指令!</h1>"
            };
        });    </script></body>

控制器: ng-controller 指令定义了应用程序控制器。
过滤器: 过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
service: AngularJS 中你可以创建自己的服务,或使用内建服务。服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。下面介绍几个常用的内建服务。(想看更多就到PHP中文网AngularJS开发手册中学习)

1,$location:类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。2,$http:AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。3,$timeout:AngularJS $timeout 服务对应了 JS window.setTimeout 函数。4,$interval:AngularJS $timeout 服务对应了 JS window.setInterval  函数。5,用户可以根据自己的需求来创建自定义服务。

http:       angularJS 中的一个核心服务,用于读取远程服务器的数据。注意v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代

格式:/ 简单的 GET 请求,可以改为 POST$http({
    method: &#39;GET&#39;,
    url: &#39;/someUrl&#39;}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码});

选择框(select):AngularJS 可以使用数组或对象创建一个下拉列表选项。

1,使用ng-options来创建一个对象<p ng-app="myApp" ng-controller="myCtrl">
    <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
    </select></p><script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.controller(&#39;myCtrl&#39;, function($scope) {
        $scope.names = ["Google", "Runoob", "Taobao"];
    });</script>2,使用ng-repeat来创建对象,<select ng-model="selectedSite">
    <option ng-repeat="x in names">{{x}}</option></select>3,区别:ng-options,选择的值是一个对象:也就是当select获取值selectedSite时候,得到的是一个对象。ng-repeat,选择的值是一个字符串:也就是当select获取值selectedSite时候,得到的是一个字符串

表格: AngularJs中的ng-repeat 指令可以完美的显示表格。也可以在表格进行显示的时候,使用过滤器。

<p ng-app="myApp" ng-controller="customersCtrl"> 
    <table>
      <tr ng-repeat="x in names | orderBy : &#39;Name&#39;">
        <td>{{ $index + 1 }}</td>//显示序号        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
      </tr>
    </table></p><script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.controller(&#39;customersCtrl&#39;, function($scope, $http) {
        $http.get("/try/angularjs/data/Customers_JSON.php")
        .then(function (result) {
            $scope.names = result.data.records;
        });
    });</script>

HTML DOM: AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
  1,ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
  2,ng-show 指令隐藏或显示一个 HTML 元素。ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。你可以使用表达式来计算布尔值( true 或 false):
  3,ng-hide 指令用于隐藏或显示 HTML 元素。注意在页面中如果使用input type=hidden来做表单传值的时候,是不支持的。
  4,ng-click 指令定义了 AngularJS 点击事件。
模块: 模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
注意: 对于 HTML 应用程序,通常建议把所有的脚本都放置在  元素的最底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的  区域被加载。在我们的实例中,AngularJS 在  元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。另一个解决方案是在  元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:
表单: AngularJS 表单是输入控件的集合。
  1,Input 控件使用 ng-model 指令来实现数据绑定。
  2,checkbox 的值为 true 或 false,可以使用 ng-model 指令绑定,它的值可以用于应用中。举个例子:

<body ng-app="myApp" ng-controller="person">
    <form ng-submit="submit()" name="myForm">
        <p>职业:            <input type="checkbox" ng-model="user.jobs.engineer">工程师            <input type="checkbox" ng-model="user.jobs.designer">设计师            <input type="checkbox" ng-model="user.jobs.teacher">教师        </p>
        <input type="submit" value="提交">
        <input type="button" value="选中教师" ng-click="select_teacher()">
    </form></body><script>
    var app = angular.module("myApp", []);
    app.controller("person", function($scope) {
        $scope.user = {
            jobs: {
                engineer: true,
                designer: false,
                teacher: false
            }
        };
        $scope.submit = function() {
            alert(JSON.stringify($scope.user));
        };
        $scope.select_teacher = function() {
            $scope.user.jobs.teacher = true;
        }
    });</script>

  3,radio:我们可以使用 ng-model 来绑定单选按钮到你的应用中。单选框使用同一个 ng-model ,可以有不同的值,但只有被选中的单选按钮的值会被使用。
  4,下拉菜单上面已经写过。在此不再复述。
输入验证: AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告。

<form  ng-app="myApp"  ng-controller="validateCtrl" name="myForm" novalidate>
    <p>用户名:<br>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
      <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
      </span>
    </p>
    <p>
      <input type="submit"
      ng-disabled="myForm.user.$dirty && myForm.user.$invalid
    </p>
</form>
<script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.controller(&#39;validateCtrl&#39;, function($scope) {
        $scope.user = &#39;John Doe&#39;;
    });
</script>

注意: 我们使用了 ng-show指令, color:red 在邮件的

invalid 都为 true 时才显示。


属性   描述$dirty 表单有填写记录$valid 字段内容合法的$invalid   字段内容是非法的$pristine  表单没有填写记录

API: AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:比较对象,迭代对象,转换对象,全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数:

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString()  判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber()  判断给定的对象是否为数字,如果是返回 true。

注意点:
1,HTML5 允许扩展的(自制的)属性,以 data- 开头。AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
2,类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。AngularJS 表达式不支持条件判断,循环及异常。AngularJS 表达式支持过滤器。

好了,本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。

以上是初识angularjs应该知道些什么?2018angularjs的入门必学教程(附实例讲解)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn