我想用Angular4技術將我的第一個應用程序開發到PHP Symfony項目中。我不使用NodeJS服務器來執行JS源代碼。但官方教程angular4沒有指定獲取angular4的另一種方式。如何下載Angular4
我沒有找到Angular4的CDN。
如何找到Angular v4的源代碼?
我想用Angular4技術將我的第一個應用程序開發到PHP Symfony項目中。我不使用NodeJS服務器來執行JS源代碼。但官方教程angular4沒有指定獲取angular4的另一種方式。如何下載Angular4
我沒有找到Angular4的CDN。
如何找到Angular v4的源代碼?
我認爲你最好的選擇是使用SystemJs
加載系統。您需要將所有已編譯的角碼下載到文件夾中,併爲systemjs配置中的文件提供路徑。通過這種方式,您不必使用任何構建系統行webpack,cli,grunt或任何npm。
下面是一個典型的systemjs配置文件。
**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
defaultExtension: 'js',
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
您可以使用此喲發生器快速啓動yo: angular2 with systemjs。由於角度是在版本4中,你需要找到umd build,它將在build文件夾中。
有,您可以探索其他方式,但我認爲你將面臨的挑戰,因爲它是一個不同的路徑和大多數的人都fllowing CLI或的WebPack構建系統
有作爲CDN對於Angular4沒有這樣的事情。
Angular在ES6上。 所以基本的過程是 你寫你的ES6代碼&將它轉儲到ES5。
Angular需要這種可以保留在CDN上的依賴關係。
<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/[email protected]/Reflect.js"></script>
<script src="https://unpkg.com/[email protected]/dist/system.js"></script>
接下來,使用SystemJS
典型SystemJS文件
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:[email protected]',
'rxjs': 'npm:rxjs',
'typescript': 'npm:[email protected]/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
看到這一行
'npm:': 'https://unpkg.com/'
在這裏,您可以提供CDN。
演示例子 https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=preview
然後在您的index.html 你告訴加載應用程序。
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
在您的機器上運行Angular 4(我希望它是linux)。安裝角度cli here
使用Angular cli,您可以非常快地啓動應用程序。只要按照指導。它簡單而高效。確保你還安裝了節點。
有關Angular Cli的一點小貼士。它用於創建項目環境將運行項目所需的所有必要資源。