وب دیتا
صفحه اصلی / آموزش طراحی وب / آموزش AngularJS / آموزش و شروع کار با AngularJs 2.0

آموزش و شروع کار با AngularJs 2.0

AngularJs 2.0

Angularjs 2.0 نسخه جدیدتر از فریمورک محبوب گوگل  برای ساخت برنامه های پیچیده در مرورگرهاست(حتی فراتر از مرورگرها).

Angularjs 2.0 تقریبا هرآنچه که برای ساخت front-end web پیچیده و برنامه های موبایل احتیاج دارید را در اختیار شما قرار می دهد. از قالب های آماده و قوی برای افزایش سرعت رندر تا مدیریت داده، سرویس های HTTP ، فرم های کنترلی و موارد بیشتر.

ویژگی های کلیدی در AngularJs 2.0

  • توسعه روی تمامی پلتفرم ها(Develop Across All Platforms)

با یاد گرفتن تنها یک فریمورک، می توانید برنامه های مختلف را ایجاد کرده و از کدهای قبلی تان استفاده مجدد بکنید و به طور کلی برای هر وسیله برنامه بسازید از صفحات وب گرفته تا mobile web ، native mobile و برنامه های دسکتاپ.

  • سرعت و کارایی در AngularJs 2.0

دستیابی به بالاترین سرعت ممکن روی پلتفرم وب (و حتی بیشتر) با استفاده از Web Workers  و Server-side rendering .

  • ابزار شگفت انگیز در AngularJs 2.0

با استفاده از قالب های ساده ، به سرعت ویژگی های جدید ایجاد کنید. با استفاده از کامپوننت های خود، قالب ها را گسترش داده و از طیف وسیع کامپوننت های موجود استفاد کنید. از کمک های فوری Angular-specific استفاده کنید و با استفاده از هر IDE  و editor کدهای خود را اجرا کنید.همه ی ویژگی های گفته شده درکنار هم و در یک جا جمع شده اند پس تمرکز خود را روی ساخت برنامه های جذاب قرار دهید به جای اینکه تمرکزتان روی نوشتن کدهای قابل اجرا باشد.

  • مجبوبیت بالا

از نسخه اولیه تا گسترش سراسری، انگولار زیرساخت های سودمندی دریافت کرده که از اکثر اپلیکیشن های گوگل پشتیبانی می کند.

چگونه اولین برنامه انگولار خود را بنویسیم؟

  • Visual Studio را باز کنید
  • یک new website ایجاد کنید
  • نام وب سایت را وارد کرده و مکان آن را مشخص کنید
  • روی “Next” کلیک کنید.

در ابتدا، باید با استفاده از command prompt،  npm_module را در پوشه پروژه تان نصب کنید.

AngularJs 2.0

چهار فایل را به دایرکتوری اصلی خود اضافه کنید.( root directory)

Package.json


{

"name": "angular-sample",

"version": "1.0.0",

"scripts": {

"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",

"lite": "lite-server",

"tsc": "tsc",

"tsc:w": "tsc -w"

},

"licenses": [{

"type": "MIT",

"url": "https://github.com/angular/angular.io/blob/master/LICENSE"

}],

"dependencies": {

"@angular/common": "~2.2.0",

"@angular/compiler": "~2.2.0",

"@angular/core": "~2.2.0",

"@angular/forms": "~2.2.0",

"@angular/http": "~2.2.0",

"@angular/platform-browser": "~2.2.0",

"@angular/platform-browser-dynamic": "~2.2.0",

"@angular/router": "~3.2.0",

"@angular/upgrade": "~2.2.0",

"angular-in-memory-web-api": "~0.1.15",

"core-js": "^2.4.1",

"reflect-metadata": "^0.1.8",

"rxjs": "5.0.0-beta.12",

"systemjs": "0.19.39",

"zone.js": "^0.6.25"

},

"devDependencies": {

"@types/core-js": "^0.9.34",

"@types/node": "^6.0.45",

"concurrently": "^3.0.0",

"lite-server": "^2.2.2",

"typescript": "^2.0.3"

}

}

tsconfig.json


{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"removeComments": false,

"noImplicitAny": false

},

"compileOnSave": true,

"exclude": [

"node_modules",

"wwwroot",

"Scripts/app"

]

}

systemjs.config


/**

* System configuration for Angular samples

* Adjust as necessary for your application needs.

*/

(function(global) {

System.config({

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',

'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

// other libraries

'rxjs': 'npm:rxjs',

'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

},

// 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'

}

}

});

})(this);

typings.json

{

"globalDependencies": {

"core-js": "registry:dt/core-js#0.0.0+20160725163759",

"node": "registry:dt/node#6.0.0+20160831021119"

}

}

حالا یک پوشه جدید(با نام پروژه) در دایرکتوری اصلی خود ایجاد کنید. چند فایل اسکریپت(TypeScript) مثل main.ts، app.module.ts و app.component.ts را اضافه کنید. در ادامه کدهای این فایل های اسکریپتی:

main.ts


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

import { enableProdMode } from '@angular/core';

platformBrowserDynamic().bootstrapModule(AppModule<strong>);  </strong>

app.module.ts

import {

NgModule

} from '@angular/core';

import {

BrowserModule

} from '@angular/platform-browser';

import {

FormsModule

} from '@angular/forms';

import {

HttpModule

} from '@angular/http';

import {

AppComponent

} from './app.component';

@NgModule({

imports: [BrowserModule, FormsModule, HttpModule],

declarations: [AppComponent],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {};

 

app.component.ts


import {

Component

} from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app/app.component.html',

styleUrls: ['./app/styles/styles.css']

})

export class AppComponent {}

app.component.html


<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

</head>

<body>

<h1>Welcome to Angular2</h1>

<h3>First sample of Angular2 By Raj Kumar. :)</h3>

</body>

</html>

app.component.css


html {

overflow - y: scroll;

overflow - x: hidden;

}

main {

position: relative;

padding - top: ۶۰ px;

}

h1 {

color: red;

}

h3 {

color: green;

}

حالا نوبت به اضافه کردن صفحه index.html و اضافه کردن تمامی ارجاعات لازم برای ماژول های برنامه، ماژول های گره و اضافه کردن کامپوننت ها.


<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="app/styles/styles.css" rel="stylesheet" />

<!-- Polyfill(s) <strong>for</strong> older browsers -->

<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>

<script src="node_modules/reflect-metadata/Reflect.js"></script>

<script src="node_modules/systemjs/dist/system.src.js"></script>

<!-- Configure SystemJS -->

<script src="systemjs.config.js"></script>

<script>

System.import('app').catch(function(err) {

console.error(err);

});

</script>

</head>

<body>

<header class="navbar navbar-inner navbar-fixed-top">

<nav class="container">

<div class="navbar-header">

<span class="app-title">Angular2 Sample</span>

</div>

</nav>

</header>

<main <strong>class</strong>="container">

<my-app>Loading...</my-app>

<br /><br />

</main>

</body>

و در نهایت اجرای برنامه

Angularjs 2.0

نتیجه گیری

در این مقاله نحوه شروع کار با AngularJs 2.0 و اضافه کردن فایل های لازم را نشان دادیم. سوالات و نظرات خود را کامنت کنید.



رمز فایل : www.mspsoft.ir , www.mspsoft.com
کانال ام اس پی سافت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *



دوره های آنلاین ام اس پی سافت

آموزش طراحی فروشگاه اینترنتی

آموزش طراحی فروشگاه اینترنتی

طراحی سیستم مدیریت مشتریان

طراحی سیستم مدیریت مشتریان

دوره طراحی وب سایت پورتال خبری

دوره طراحی وب سایت پورتال خبری

دوره طراحی حسابداری فروشگاه

دوره طراحی حسابداری فروشگاه
تخفیفات نوروزی ام اس پی سافت

5 کد تخفیف 100 درصدی برای کاربران شبکه های اجتماعی | آدرس شبکه های اجتماعی ما : @mspsoft

هر روز یک کد تخفیف برای 5 نفر اول در شبکه انیستاگرام و تلگرام