zoukankan      html  css  js  c++  java
  • Angular框架

    MVVM框架的组成:

    数据绑定、指令系统、组件式编程、路由和导航、状态保持、第三方组件库

    Angular框架 

    AngularJS v1.x官网:https://angularjs.org/

    AngularJS v2.x~v8.x官网:https://angularjs.io

    AngularJS  中文镜像网站:https://www.angular.cn/

    是由Google 2009年开发的MVVM框架,最新版为8.2,可用于开发web、移动、桌面应用的中大型框架

    Vue.js开发方式:1.script引入vue.js      2.脚手架方式

    AngularJS v1.x 开发方式:1.script引入vue.js   2.脚手架方式

    AngularJS v2.x开发方式:1.脚手架方式

    小知识:

    使用第三方NPM下载仓库

    查看当前NPM默认的下载仓库地址:

         npm config get registry

    修改NPM默认的下载仓库地址为国内镜像网站

         npm config set registry   新仓库地址

    例如:可以使用淘宝提供的NPM镜像:

         npm config set registry  https://registry.npm.taobao.org

    搭建Angular开发环境

    前提:NG需要Node.jsV10.x以上

    1.下载并安装脚手架工具

       npm install -g @angular/cli

      此步骤会下载全局工具ng.cmd

    2.运行脚手架工具创建空白项目

       ng new myngapp01

    3.进入空白项目并运行开发服务器

       cd myngapp01

       npm  start

    4.客户端访问测试

       http://127.0.0.1:4200

    下载脚手架工具常见错误:

    1.ENOENT:no such file or directory,access to C:/user/...Roaming/npm

       解决方案:使用管理员账户重新登录

    2.npm ERR:Cannot read property resolve of undefined

       解决方案:稍后重试,或者更改仓库地址

    3.-4048 EPERM:operation not permitted unlink

       解决方案:使用管理员账户重新登录

    4.git命令没有找到

      解决方案:在电脑安装Git软件,并配置用户名和邮箱

    英语单词:

          Model:模型,即数据,MVVM中第一个M

          Module:模块,1.Node.js  2.ES6  3.NG中

          Modal:模态对话框

    Angular.js项目启动过程分析:

    (1)angular.json:NG项目的配置

        index.js:./src/index.html      <app-root></app-root>

        main:  ./src/main.ts 

    (2)main.js  >bootstrapModule(AppModule)

    (3)app.module.ts  >bootstrap:[AppComponent]

    (4)app.component.ts > selector:'app-root'

                                       >templateUrl:'app.component.html'

    (5)app.component.html  >HTML片段....

    2.Angular核心概念之一:模块

      Module:不同于Node.js或ES6中的模块,NG中的模块就是一个抽象的容器,用于对组件进行分组。

      整个应用初始时有且只有一个主组件:AppModule

    3.Angular核心概念之二:组件

       组件:是一段可以反复使用的页面片段,如页头、轮播、手风琴....

       组件(Component)=模板(Template)+脚本(Script)+样式(Style)

       提示:NG中,任何一个组件都必须声明在一个模块中!

       自定义组件步骤:

       1.创建组件 class

        @Component({

                selector:'myc01',

                template:'<h2></h2>'

         })

         export class  MyC01Component{   }

        2.在某个模块中注册组件class

        //app.module.ts

        declaration:[AppComponent,MyC01Component]

        3.使用已经注册过的组件

        //app.component.html

        <myc01></myc01>

    Angular提供的创建组件的简化工具:

         ng generate component   组件名

         npx ng  generate component   组件名

         上述命令可以简化为:

          ng   g  comonent    组件名

          npx   ng    g component   组件名 命令行辅助工具(ng)

    Node.js官方安装的工具:

        npm:第三方模块的维护工具

        npx:第三方可执行文件的执行工具,Node Package Executor npx 可用于执行当前项目中 node_modules/.bin 目录下的可执行文件

    4.Angular核心概念之三:数据绑定

    (1)HTML绑定:{{NG表达式}}

         测试:NG表达式中可以执行哪些代码?

         算术运算?  ----可以

         比较运算? ----可以

         逻辑运算?----可以

         三目运算符 ----可以

         调用函数? ----不可以,NG表达式中禁止出现new关键字

         JSON序列化? ----不可以,NG表达式中JSON是undefined

    (2)属性绑定:    Vue.js: v-bind或简写为:

        形式1:直接在属性上用{{}}   <p  title="{{msg}}"></p>

        形式2:使用[]做属性绑定    <p  [title]="msg"></p>

    (3)指令绑定

    (4)事件绑定:

    Vue.js: v-on或简写为@

    (5)双向数据绑定

  • 相关阅读:
    webpack4.0在项目中的安装配置
    Java调用开源GDAL解析dxf成shp,再调用开源GeoTools解析shp文件
    VUE-CLI3.0组件封装打包使用
    鼠标光标在input框,单击回车键后防止页面刷新的问题
    MapBox GL加载天地图以及加载导航控件
    web前端监控视频的展示
    css外部字体库文件的引用
    IIS上部署的程序,PLSQL能连上数据库,系统登录报错
    部署在IIS上的程序,可以找到文件夹,能看到文件却报404
    继承
  • 原文地址:https://www.cnblogs.com/sna-ling/p/12078258.html
Copyright © 2011-2022 走看看