Jadual Kandungan
AngularJS介绍
AngularJs基础操作
Rumah hujung hadapan web tutorial js 初识angularjs应该知道些什么?2018angularjs的入门必学教程(附实例讲解)

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

Sep 08, 2018 pm 02:07 PM
angularjs

本篇文章介绍的是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>
Salin selepas log masuk

初始化应用程序: 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>
Salin selepas log masuk

控制器: 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,用户可以根据自己的需求来创建自定义服务。
Salin selepas log masuk

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) {
        // 请求失败执行代码});
Salin selepas log masuk

选择框(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时候,得到的是一个字符串
Salin selepas log masuk

表格: 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>
Salin selepas log masuk

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>
Salin selepas log masuk

  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>
Salin selepas log masuk

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

invalid 都为 true 时才显示。


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

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

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

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

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

Atas ialah kandungan terperinci 初识angularjs应该知道些什么?2018angularjs的入门必学教程(附实例讲解). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

2022年最新5款的angularjs教程从入门到精通 2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Jun 27, 2023 pm 07:37 PM

Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan

Bina aplikasi web menggunakan PHP dan AngularJS Bina aplikasi web menggunakan PHP dan AngularJS May 27, 2023 pm 08:10 PM

Dengan pembangunan berterusan Internet, aplikasi Web telah menjadi bahagian penting dalam pembinaan maklumat perusahaan dan cara kerja pemodenan yang diperlukan. Untuk menjadikan aplikasi web mudah dibangunkan, diselenggara dan dikembangkan, pembangun perlu memilih rangka kerja teknikal dan bahasa pengaturcaraan yang sesuai dengan keperluan pembangunan mereka. PHP dan AngularJS ialah dua teknologi pembangunan web yang sangat popular. Kedua-duanya adalah penyelesaian bahagian pelayan dan bahagian pelanggan. Penggunaan gabungan mereka boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Kelebihan PHPPHP

Bina aplikasi web satu halaman menggunakan Flask dan AngularJS Bina aplikasi web satu halaman menggunakan Flask dan AngularJS Jun 17, 2023 am 08:49 AM

Dengan perkembangan pesat teknologi Web, Aplikasi Web Halaman Tunggal (SinglePage Application, SPA) telah menjadi model aplikasi Web yang semakin popular. Berbanding dengan aplikasi web berbilang halaman tradisional, kelebihan terbesar SPA ialah pengalaman pengguna lebih lancar, dan tekanan pengkomputeran pada pelayan juga sangat berkurangan. Dalam artikel ini, kami akan memperkenalkan cara membina SPA mudah menggunakan Flask dan AngularJS. Flask ialah Py ringan

Cara menggunakan PHP dan AngularJS untuk pembangunan bahagian hadapan Cara menggunakan PHP dan AngularJS untuk pembangunan bahagian hadapan May 11, 2023 pm 05:18 PM

Dengan populariti dan perkembangan Internet, pembangunan bahagian hadapan menjadi semakin penting. Sebagai pembangun bahagian hadapan, kita perlu memahami dan menguasai pelbagai alatan dan teknologi pembangunan. Antaranya, PHP dan AngularJS adalah dua alat yang sangat berguna dan popular. Dalam artikel ini, kami akan menerangkan cara menggunakan kedua-dua alat ini untuk pembangunan bahagian hadapan. 1. Pengenalan kepada PHP PHP ialah bahasa skrip bahagian pelayan sumber terbuka yang popular Ia sesuai untuk pembangunan web dan boleh dijalankan pada pelayan web dan pelbagai sistem pengendalian. Kelebihan PHP adalah kesederhanaan, kelajuan dan kemudahan

Gunakan PHP dan AngularJS untuk membangunkan platform pengurusan fail dalam talian untuk memudahkan pengurusan fail Gunakan PHP dan AngularJS untuk membangunkan platform pengurusan fail dalam talian untuk memudahkan pengurusan fail Jun 27, 2023 pm 01:34 PM

Dengan populariti Internet, semakin ramai orang menggunakan rangkaian untuk memindahkan dan berkongsi fail. Namun, atas pelbagai sebab, pengurusan fail menggunakan kaedah tradisional seperti FTP tidak dapat memenuhi keperluan pengguna moden. Oleh itu, mewujudkan platform pengurusan fail dalam talian yang mudah digunakan, cekap dan selamat telah menjadi satu trend. Platform pengurusan fail dalam talian yang diperkenalkan dalam artikel ini adalah berdasarkan PHP dan AngularJS Ia boleh melakukan muat naik, memuat turun, mengedit, memadam dan operasi lain dengan mudah, dan menyediakan satu siri fungsi yang berkuasa, seperti perkongsian fail, carian,

Bagaimana untuk menggunakan AngularJS dalam pengaturcaraan PHP? Bagaimana untuk menggunakan AngularJS dalam pengaturcaraan PHP? Jun 12, 2023 am 09:40 AM

Dengan populariti aplikasi web, rangka kerja bahagian hadapan AngularJS telah menjadi semakin popular. AngularJS ialah rangka kerja JavaScript yang dibangunkan oleh Google yang membantu anda membina aplikasi web dengan keupayaan aplikasi web dinamik. Sebaliknya, untuk pengaturcaraan bahagian belakang, PHP ialah bahasa pengaturcaraan yang sangat popular. Jika anda menggunakan PHP untuk pengaturcaraan sisi pelayan, maka menggunakan PHP dengan AngularJS akan membawa lebih banyak kesan dinamik ke tapak web anda.

AngularJS基础入门介绍 AngularJS基础入门介绍 Apr 21, 2018 am 10:37 AM

这篇文章介绍的内容是关于AngularJS基础入门介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下。

See all articles