Angular4学习笔记之新建项目的方法
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
本篇文章主要介绍了Angular4学习笔记之新建项目的方法，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧
Angular4我自己还在摸索学习中，这个系列中的笔记会不定期修改和更新……
一、安装nodejs（狼蚁网站SEO优化方式 二选一，个人推荐第二种）
1、
2、使用nvm安装管理（）
二、全局安装angular-cli
npm install -g @angular/cli
三、进入一个存放项目的文件夹，运行以下代码，初始化项目
ng new <项目名>
四、启动项目
cd <项目名> npm install ng serve
附：
1.引入jQuery和bootstrap
a.安装jquery和bootstrap
npm install jquery --save npm install bootstrap --save
b.安装@types/jquery
代码如下:
npm install @types/jquery --save-dev <!-- 这一步是让jquery可以在Ts文件中被识别使用 --!>
c.在项目的根目录下找到.angular-cli.json文件修改其配置，修改时注意引用路径是以index.html文件为起始路径，而不是项目根路径
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"version": "1.0.0-alpha.4",
"name": "angualr4demo"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",<!-- 这里添加bootstrap引用路径 --!>
"scss/style.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js"<!-- 这里添加jquery引用路径 --!>
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false
}
}
d. 在src/typings.d.ts 中添加
declare var $: JQueryStatic;
2、引入require
在在src/typings.d.ts 中添加
declare var require: any;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：iscroll动态加载数据完美解决方法
下一篇：详解使用nvm安装node.js