{"id":4094,"date":"2016-10-13T08:52:43","date_gmt":"2016-10-13T08:52:43","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=4094"},"modified":"2025-03-05T08:57:26","modified_gmt":"2025-03-05T08:57:26","slug":"get-started-with-angular-2","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/get-started-with-angularjs-2","title":{"rendered":"Get Started with Angular 2"},"content":{"rendered":"<p>AngularJS 2 is an open source web and mobile application development framework. Nowadays it is widely used for desktop application development as it is a module base framework. Let me get you through the detailed guideline so you can have understanding that how to use its module or component in your application to import it.<\/p>\n<h2>AngularJS 2 Application File Structure<\/h2>\n<p><center><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2016\/10\/angularjs-2-application-file-structure.jpg\" alt=\"AngularJS 2 Application File Structure\" width=\"425\" height=\"229\" class=\"aligncenter size-full wp-image-4095\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2016\/10\/angularjs-2-application-file-structure.jpg 425w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2016\/10\/angularjs-2-application-file-structure-300x162.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2016\/10\/angularjs-2-application-file-structure-20x11.jpg 20w\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" \/><\/center><\/p>\n<p>It has one HTML file (index.html) and Two Type Script files in app directory (app.component.ts, main.ts).<\/p>\n<h2>Create an application project folder<\/h2>\n<p>Create a folder\/directory for our AngularJS 2 application (Run following command in terminal window).<\/p>\n<pre>\r\n<strong>mkdir MyAngularApp\r\ncd MyAngularApp<\/strong>\r\n  <\/pre>\n<h2>Install the node.js <\/h2>\n<p>Installing node js (Run following command in terminal window)<\/p>\n<pre>\r\n<strong>npm install node.js<\/strong>\r\n<\/pre>\n<p>The above command will create a folder name &#8220;node_modules&#8221; with node.js folder containing  files like lib,  package.json many more.<\/p>\n<h2>Install the npm packages and typing files<\/h2>\n<p>Install all the packages included in package.json file, run following command in terminal window. (for windows on command line)<\/p>\n<p><strong>npm install<\/strong><\/p>\n<p>In order to get npm install and run, I have globally installed some of the devDependencies (Run following commands in terminal window)<\/p>\n<pre>\r\n<strong>\r\nnpm install -g typescript  (g for globally installing globally)\r\nnpm install typings (this is used to convert .ts file to js file)\r\n<\/strong>\r\n<\/pre>\n<p>This is how you can create the development environment for your AngularJS 2 application.<\/p>\n<p>Now let\u2019s start by developing (creating) <strong>Hello World application<\/strong>.<\/p>\n<h2>Open an application project folder in the <strong>Code.VisualStudio.com<\/strong> (Can use notepad++, Subline instead)<\/h2>\n<p>Every AngularJS 2 application consists of one or many components. These components are building blocks of AngularJS 2 application. Every component controls a portion of the application using the template.<\/p>\n<p>Make sure, every AngularJS 2 application has one root component, commonly referred as AppComponent.<\/p>\n<p>AppComponent is a component class. There are two purposes of the component class.<\/p>\n<ul>\n<li>Control appearance of view<\/li>\n<li>Control behavior of view<\/li>\n<\/ul>\n<p>Component class control behavior and appearance of view through a template. Component class can have component decorator.<\/p>\n<p>There are two purposes of component decorator<\/p>\n<ul>\n<li>It tells the AngularJS framework what template to use<\/li>\n<li>It tells the AngularJS framework how the component will be created.<\/li>\n<\/ul>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Are you looking for proficient Angular developers for your project?<\/span><br \/>\nBacancy is here for you! Contact us now and <a href=\"https:\/\/www.bacancytechnology.com\/angular-js-development\" target=\"_blank\" rel=\"noopener\">hire angularjs developer<\/a> to build, optimize, and deploy your application.<\/i><\/strong><\/p>\n<h2>Create app.component.ts<\/h2>\n<p>So now let\u2019s create AppComponent for our <a href=\"https:\/\/www.bacancytechnology.com\/blog\/upgrade-angularjs-1.0-to-angularJS-2.0\" target=\"_blank\" rel=\"noopener\">AngularJS 2<\/a> application in app.component.ts file<\/p>\n<pre>\r\n\r\n\/* Importing Component decorator function from anularjs library module *\/\r\n \r\nimport {Component} from 'angular2\/core'\r\n\r\n\r\n\/* Creating  AppComponent Class decorator *\/\r\n@Component ({\r\n\tselector: 'my-app',\r\n\ttemplate: 'AngularJS 2 Hello World'\r\n})\r\n \r\n\/* Creating AppComponent class *\/\r\n\/* Exporting AppComponent Class *\/\r\nexport class AppComponent{}\r\n<\/pre>\n<p>Our Component decorator has two elements (fields) selector and a template.<\/p>\n<p>We have assigned AppComponent names to selector field. We can use that AppComponent name in HTML. Whenever we use that AppComponent name (learning-turn) in HTML, AngularJS creates a AppComponent instance and displayed it in HTML.<\/p>\n<p><strong>AppComponent slector is CSS selector not HTML tag<\/strong><\/p>\n<p>We have assigned an AppComponent template to template field. It tells the AngularJS how to render the AppComponent view. Template fields can have HTML and other components<\/p>\n<p>We have exported AppComponent so, we can import it somewhere else in our application.<\/p>\n<p>Our AppComponent is now to ready in order to use it in our application.<\/p>\n<h2>Create main.ts file<\/h2>\n<p>Now create main.ts file in app directory<\/p>\n<p>Following is the purpose of main.ts file<\/p>\n<ul>\n<li>main.ts is entry point (like main function) of our AngularJS 2 application.<\/li>\n<li>In main.ts we tells the Angular how to load our AngularJS 2 application.<\/li>\n<li>In main.ts we tells the Angular in which platform we want to run our AngularJS 2 application (We are going to run our application in browser).<\/li>\n<li>In main.ts we specify external dependencies of our AngularJS 2 application.<\/li>\n<\/ul>\n<p><strong>Here is our main.ts file<\/strong><\/p>\n<pre>\r\n\/* importing bootstrap component from angular library *\/\r\n \r\nimport {bootstrap} from 'angular2\/platform\/browser';\r\n \r\n\/* Importing AppComponent created in app.component.ts file *\/\r\nimport {AppComponent} from '.\/app.component';\r\n \r\n\/* Bootstrapping AppComponent *\/\r\nbootstrap(AppComponent);\r\n<\/pre>\n<p><strong><br \/>\ncreate index.html<\/strong><\/p>\n<p>Now create an index.html file in your root directory of the project<\/p>\n<p>index.html will load our application in the browser. In index.html we load required scripts (libraries), define system configuration and define an application component selector.<\/p>\n<p>Here is our index.html<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;title&gt;AngularJS 2 Getting Started. Hello world Application&lt;\/title&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;    \r\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\r\n \r\n    &lt;!-- 1. Load libraries --&gt;\r\n    &lt;!-- IE required polyfills, in this exact order --&gt;\r\n    &lt;script src=\"node_modules\/es6-shim\/es6-shim.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"node_modules\/systemjs\/dist\/system-polyfills.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"node_modules\/angular2\/es6\/dev\/src\/testing\/shims_for_IE.js\"&gt;&lt;\/script&gt;   \r\n \r\n    &lt;script src=\"node_modules\/angular2\/bundles\/angular2-polyfills.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"node_modules\/systemjs\/dist\/system.src.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"node_modules\/rxjs\/bundles\/Rx.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"node_modules\/angular2\/bundles\/angular2.dev.js\"&gt;&lt;\/script&gt;\r\n \r\n    &lt;!-- 2. Configure SystemJS --&gt;\r\n    &lt;script&gt;\r\n      System.config({\r\n        packages: {        \r\n          app: {\r\n            format: 'register',\r\n            defaultExtension: 'js'\r\n          }\r\n        }\r\n      });\r\n      System.import('app\/main')\r\n            .then(null, console.error.bind(console));\r\n    &lt;\/script&gt;\r\n  &lt;\/head&gt;\r\n \r\n  &lt;!-- 3. Display the application --&gt;\r\n  &lt;body&gt;\r\n    &lt;my-app&gt;Loading...&lt;\/my-app&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n\r\n\r\n  <\/pre>\n<p>When AngularJS framework calls bootstrap function in app\/main.ts file, AngularJS prepare AppComponent, find AppComponent selector (my-app), locate AppComponent selector assigned CSS selector (my-app) in index.html and load application between that it.<\/p>\n<h2>Compile and Run<\/h2>\n<p>Now open your terminal window and run following command (right click on the app folder, click  &#8216;Open in Command Prompt&#8217;<\/p>\n<pre>\r\nnpm start \r\n<\/pre>\n<p>You can see the output in the default browser.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS 2 is an open source web and mobile application development framework. Nowadays it is widely used for desktop application development as it is a module base framework. Let me get you through the detailed guideline so you can have understanding that how to use its module or component in your application to import it. [&hellip;]<\/p>\n","protected":false},"author":146,"featured_media":4109,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[989],"tags":[],"coauthors":[2427],"class_list":["post-4094","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/4094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=4094"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/4094\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/4109"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=4094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=4094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=4094"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}