angular4总结

<1>新建项目

1.新建项目
ng new projectname
2.运行项目测试
ng serve --open
地址:localhost:4200
3.安装第三方插件jquery和bootstrap

  npm install jquery --save
  npm install bootstrap --save

4.把第三方插件引入项目,配置angular-cli.json文件
目的:把jquery和bootstrap的js路径和bootstrap.css加上去

  "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css" //引入bootstrap css
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js", //引入 jquery js
        "../node_modules/bootstrap/dist/js/bootstrap.js" //引入bootstrap js
      ],

5.安装bootstrap和jquery类型描述文件
目的:为了让typescript文件认识bootstrap和jquery的代码

  npm install @types/jquery --save--dev
  npm insatall @types/jquery --save--dev

6.生成组件

ng g component navbar (其中navbar是自定义命名的组件名字)

<2>angular路由

1.创建项目时添加路由
ng new router --routing //新建项目时多加--routin参数
2.在路由时传递数据
(1)在查询参数中传递数据
/product?id=1&name=2 > ActivatedRoute.queryParams[id]
(2)在路由路径中传递数据
{path:/product/:id > /product/1 >ActivatedRoute.params[id]
(3)在路由配置中传递数据

{path:/product,component:ProductComponent,data[{isProd:true}] > 
  ActivatedRoute.data[0][isProd]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Angular 版本 Angular 4.0并不是在原有基础上改的,而是一个完全重写的版本,不同于Angular ...
    耦耦阅读 2,085评论 2 5
  • 一、SPA的概念 首先明确一个概念,SPA,全称为Single Page Application单页应用,一个单页...
    耦耦阅读 6,021评论 0 3
  • 一.四大核心思想# 依赖注入、模块化、语义化、双向数据绑定 二.MVC# M:model 模型V:vie...
    Devour_z阅读 334评论 0 0
  • 想要表达,想要引起关注,仿佛就开始了鼓吹。高明的,拙劣的,也是因人而异。我想一个非常谦卑的人,会因...
    果子le阅读 232评论 0 1
  • 最近嘴里有火,前天刚和王先生讨论了现在的孩子们买苹果7有何用?丢了还心疼!晚上就听说侄女的手机在店里丢了,小...
    心灵烟火阅读 918评论 0 0