首頁 > 文章 > web前端 > 初識angularjs該知道些什麼？ 2018angularjs的入門必學教學（附實例講解）

初識angularjs該知道些什麼？ 2018angularjs的入門必學教學（附實例講解）

寻∝梦原創: 2018-09-08 14:07:441078瀏覽

這篇文章介紹的是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: ａngularJS 中的一個核心服務，用於讀取遠端伺服器的數據。注意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

上一篇：AngularJs控制器如何使用？ angularjs控制器的使用實例下一篇：AngularJs控制器如何使用？ angularjs控制器的使用實例

看更多