0

0

AugularJS基础入门与实践

巴扎黑

巴扎黑

发布时间:2017-07-23 11:33:37

|

1635人浏览过

|

来源于php中文网

原创

 

Ztoy网络商铺多用户版
Ztoy网络商铺多用户版

在原版的基础上做了一下修正:增加1st在线支付功能与论坛用户数据结合,vip也可与论坛相关,增加互动性vip会员的全面修正评论没有提交正文的问题特价商品的调用连接问题删掉了2个木马文件去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正定单不能删除问题VIP出错问题主题添加问题商家注册页导航连接问题添加了导航FLASH源文

下载

  前  言

 前端 

    AngularJS是为了克服HTML在构建应用上的不足而设计的。(引用百度百科)

  AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。(引用百度百科)
   
   例如:

 

        使用双大括号{{}}语法进行数据绑定;

 

        使用DOM控制结构来实现迭代或者隐藏DOM片段;

 

        支持表单和表单的验证;

 

        能将逻辑代码关联到相关的DOM元素上;

 

        能将HTML分组成可重用的组件。

 

本篇学习主要有两个部分:

  ①【AngularJS 常用指令】
  ②【AngularJS  的  mvc 】
 

          

 

1、AngularJS 常用指令

【常用指令】
  1.na-app:声明angularjs所管辖的区域,一般写在body或者HTML上原则一个一面只写一个
        
        
        2.ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
            
        
        3.ng-bind 指令把应用程序数据绑定到 HTML 视图。
        
            ①

            ②
{{name}}

        4.ng-init 指令初始化 AngularJS 应用程序变量。
            
            
        5.表达式:{{}}绑定表达式,可以包含数字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=”代替
        {{5+""+5+',Angular'}}

【基本感念】
指令:AngularJS中,通过扩展HTML的属性提供功能  ↓↓↓↓(菜鸟教程中的原话)
            AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。

            ng-app 指令初始化一个 AngularJS 应用程序。
            
            ng-init 指令初始化应用程序数据。
            
            ng-model 指令把元素值(比如输入域的值)绑定到应用程序。     
       
 
2、AngularJS  的  mvc
   
【mvc三层框架】

            1、 Model(模型):应用程序中处于处理属性局的部分。(保存或修改数据到数据库、变量等)。AugularJS中的Model特征的是:数据
              view(视图):用户看到的而用于显示数据的页面
              controller(控制器):应用程序中处理用户交互的部分。负责从视图读取数据,控制用户输入,并项目性发送数据。

            2、工作原理:用户从视图层发送请求,controller接收到请求后转发给对应的model处理,medle处理完成后返回结果给controller,并在view成反馈给用户。
       

  创建一个angular模块,即ng-app所绑定的部分,需要传递两个参数:
            ① 模块名称,即ng-app所需要绑定的名称。ng-app="myApp";
            ② 数组:需要注入的模块名称,不需要可为空。
       
        var app = angular.module("myApp",[]);
       
         在Angular模块上,创建一个控制器Controller,需要传递两个参数称。  
         ① ng-controller="myCtrl"
         ② controller的构造函数:构造函数可以传入多个参数,包括$scope/$roatScope以及各种系统内置对象
        
        【angularJS中的作用域】
        ①$scope:局部作用域,声明在$scope上的属性和方法,只能在当前Controller中使用;
        ②$rootScope:根作用域,声明在$rootscope上的熟悉感和方法可以在ng-app所包含的任何区域使用(无论是否同意controller,或是否在controller包含范围中)。
        >>> 若没有使用$scope 声明变量,而直接在html中使用ng-model绑定的变量作用域为:
        1.如果ng-model在某个ng-controller中,则此变量会默认绑定到当前Controller的$scope上
        2.如果ng-model没有在任何一个ng-controller中,则此变量将绑定在$rootScope上。

效果图如下:

 

代码如下:
 1  2  3      4          5          6         13     14     15         
16 17
18
19
20
21
22
23 24
25
26 27
28
29 30
31 32 33 34 53

 



 

 

学习时候的笔记,可能会有一些错误的地方,欢迎各位的批评指点。

反思,复盘,每天收获一点---------------------期待更好的自己

 

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号