Skip to main content

hello world in angular js

Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond).

 Code link :
https://drive.google.com/open?id=0BxmTZPVcu72fWjJnNF9zWnRRLWM

 Demo link :
http://freeteachnology.hol.es/quickstart/

Angular 2 comes with almost everything you need to build a complicated frontend web or mobile apps, from powerful templates to fast rendering, data management, HTTP services, form handling.

Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond).

When Angular 2 was announced in October 2014 at the ngEurope conference, the ngCommunity was up in arms: what did this mean for their favorite framework they invested so much time into learning and building real things with? A lot of Angular developers were worried that Angular 2 would spell the end for Angular.

URL Link : http://learnangular2.com/templates/

Best example of hello world :
https://angular.io/docs/ts/latest/guide/setup.html
Using CLI :
https://angular.io/docs/ts/latest/cli-quickstart.html

Learning program code :
https://angular.io/docs/ts/latest/guide/learning-angular.html

After that, we start dissecting how Angular 2 apps function at their most fundamental level. We dive right into the heart of Angular 2 which includes understanding:

1-Components
2-Templating
3-Routing & Navigation
4-Services
5-Property, Event, Class & Style binding
6-Animation

1-1-Components :
he component is a controller class with a template which mainly deals with a view of the application and logic on the page,Components are at the heart of Angular 2 apps,
A component in Angular 2 is used to represent a View along with the associated logic (encapsulated as a Class),

Eg: components are following example is best,
Student marksheet is component are divided into two types ,
1-search student marksheet entering text box field,
2-search student marksheet show search result

Component are associated with :
1-view,
2-class 

2- INPUTS :
Inputs is important in angular 2 because most developer you know how to pass data into components to dynamics configure them,


3-Output :

If you want to bind to particular event, you can use the new Event syntax in Angular 2, but what if you need your own custom event?

To create a custom event, we can use the new

4-APP LIFECYCLE :
Angular apps go through a multi-stage bootstrap and lifecycle process, and we can respond to various events as our app starts, runs, and creates/destroys components.

5-Templates :
Templates are very similar to templates in Angular 1, though there are many small syntactical changes that make it more clear what is happening.

Eg:
<div>
  Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>
Following ways to data binding process :

1-{}RENDERING,
2-[]BINDING PROPERTIES,
3-(): HANDLING EVENTS
4-[()]: TWO-WAY DATA BINDING

6-EVENTS :
Events in Angular 2 use the parentheses notation in templates, and trigger methods in a component’s class

EVENT OBJECT

To capture the event object, pass $event as a parameter in the event callback from the template:

7-FORMS

Forms are the cornerstone of any real app. In Angular 2
Where we used to use ngModel and map to our internal data model, in Angular 2 we more explicitly build forms and form controls.
While it feels like more code to write, in practice it’s easier to reason about than with v1, easier to unit test, and we no longer have to deal with frustrating ngModel and scope data problems.

8-VIEWCHILD

Child components in our view can be accessed from our parent component easily with 

Setup a local development environment
Npm install as follow :


Npm install as following command :

Sudo npm install npm -g

This is app develop on local not server or live project code, run on your machine,its a basic angular 2 program because this phase is learning angular.

Make sure you have  npm and node js install on machine,
Please create following folder structure as follow :
1-create project folder,
2-qiuck start guide donwload,
3-install npm package,
4-and run npm start command.

Following ways to create clone of project,please hit following link or url  on command prompt 

Command :
git clone https://github.com/angular/quickstart.git quickstart

Create clone of quick start project
Then following steps :

1- cd quickstart

2-npm install quickstart

3-npm start

If the download all fail then please following link :

https://github.com/angular/quickstart/archive/master.zip


On particular folder all clone files download please check quickstart folder and create following folder structure :


Following important of component files, before you start study on component and other things


When code is run using npm start commnad 

Command :

Npm start


Angular js documentation as follow :

https://angular.io/docs/ts/latest/

I hope that my blog you liked and if you like please comment and share 
Thanks





Comments

Post a Comment

Popular posts from this blog

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...
Post a Comment
Read more

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links user want to share any information then use following code  and read step by step Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links if you want share profile on following social link : 1-Facebook 2-twitter.com 3-LinkedIn 4-google +, Code link : https://drive.google.com/open?id=1IzTZZh_0euDqFSHL_vPRiQePlNTw3h-q Demo link : http://freeteachnology.hol.es/socialshare/ To modify a page's thumbnail image, description, and additional metadata for these services, you can provide meta tags in the HTML code of the page.Implementing Open Graph Meta Tags You can implement meta tags in a number of ways. In content management systems might  be allow you to modify a page's meta tags , then use following code in meta section of your project code, <link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.m...
Post a Comment
Read more

GUID for globally unique identifier

How to create GUID in php 1-guid stands for globally unique identifier generally used to create random unique strings in php, create access token in php 2-Mostly use of GUID for generating access token, generate unique id, generating unique string in php. Using this article how to create guide in php you can create a random string for any use to keep unique 3-GUID consists of alphanumeric characters only and is grouped in five groups separated by hyphens as seen in this example: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 Eg:- <?php /** * Generate Globally Unique Identifier (GUID) * E.g. 2EF40F5A-ADE8-5AE3-2491-85CA5CBD6EA7 * * @param boolean $include_braces Set to true if the final guid needs * to be wrapped in curly braces * @return string */ function generateGuid($include_braces = false) { if (function_exists('com_create_guid')) { if ($include_braces === true) { return com_create_guid(); } else { return substr(com_cr...
2 comments
Read more