Ionic guide update (#22209)
* updated angular guide to focus on angular 2+ * updated intro to ionic guide
This commit is contained in:
Dom Slatford
committed by
Huyen Nguyen
Huyen Nguyen
parent
ad4d7c72b2
commit
97ef234fe4
@ -8,73 +8,27 @@ title: Angular
|
||||
## Angular
|
||||
|
||||
|
||||
AngularJS (versions 1.x) is a JavaScript based open source Framework. It is cross platform and used to develop Single Page Web Applications (SPWA). AngularJS implements the Model-View-Controller(MVC) pattern to separate the logic, presentation and data components. It also uses dependency injection to make use of server-side services in client side applications.
|
||||
|
||||
Angular(versions 2.x and up) is a Typescript based open source framework to develop front-end Web application. Angular has following features like generics, static-typing and also some ES6 features.
|
||||
Angular(versions 2 and up) is a Typescript based open source framework to develop front-end Web application. It is the successor of AngularJS and all mention of Angular should refer to versions 2 and up. Please see the seperate AngularJS catagory for its respective guides. Angular has following features like generics, static-typing and also some ES6 features.
|
||||
|
||||
## Version History
|
||||
|
||||
Google released the initial version of AngularJS on October 20,2010. Stable release of AngularJS was on December 18, 2017 of version 1.6.8. Angular 2.0 release took place on Sep-22 2014 at ng-Europe conference. One of the feature of Angular 2.0 is dynamic loading and modularity, most core functionality has moved to modules.
|
||||
|
||||
After some modifications, Angular 4.0 was released on Dec-2016. Angular 4 is backward compatible with Angular 2.0. HttpClient library is one of the feature of Angular 4.0. Angular 5 release was on November 1, 2017. Support for Progressive web apps was one of the improvement in the Angular 5.0. Angular 6 release was in May 2018. The latest stable version is [7.0.0](https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c), which was release in October 2018.
|
||||
After some modifications, Angular 4.0 was released on Dec-2016. Angular 4 is backward compatible with Angular 2.0. HttpClient library is one of the feature of Angular 4.0. Angular 5 release was on November 1, 2017. Support for Progressive web apps was one of the improvement in the Angular 4.0. Angular 6 release was in May 2018 and Angular 7 in October 2018. The latest stable version is [7.0.0](https://angular.io/guide/releases)
|
||||
|
||||
**Install**:
|
||||
|
||||
We can add Angular either by referencing the sources available or downloading the framework.
|
||||
|
||||
**Install using Angular CLI**
|
||||
|
||||
npm install -g @angular/cli
|
||||
ng new app-name
|
||||
cd app-name
|
||||
ng serve
|
||||
|
||||
For more information follow the link https://cli.angular.io/
|
||||
|
||||
**Link To Source**:
|
||||
|
||||
AngularJS: We can add AngularJS(Angular 1.x versions) by referencing the Content Delivery Network from Google.
|
||||
|
||||
```html
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
|
||||
```
|
||||
|
||||
Download/install: We can download the framework with npm, Bower or composer
|
||||
|
||||
**Angular 1.x**:
|
||||
|
||||
npm
|
||||
|
||||
```shell
|
||||
npm install angular
|
||||
```
|
||||
Then add a `<script>` to your `index.html`:
|
||||
|
||||
```html
|
||||
<script src="/node_modules/angular/angular.js"></script>
|
||||
```
|
||||
|
||||
bower
|
||||
The easiest way to install Angualr is through the (CLI project)[https://cli.angular.io/] this tool allows the creation of new projects and generating components/services/modules etc to a standard the Angular team consider to be best practices.
|
||||
|
||||
```shell
|
||||
bower install angular
|
||||
```
|
||||
Then add a `<script>` to your `index.html`:
|
||||
npm install -g @angular/cli
|
||||
|
||||
```html
|
||||
<script src="/bower_components/angular/angular.js"></script>
|
||||
ng new example-app
|
||||
|
||||
cd example-app
|
||||
|
||||
ng serve
|
||||
```
|
||||
|
||||
For more information regarding the documentation, refer to the official site of [AngularJS](https://docs.angularjs.org/api)
|
||||
|
||||
**Angular 2.x**:
|
||||
|
||||
npm
|
||||
|
||||
```shell
|
||||
npm install -g @angular/cli@latest
|
||||
```
|
||||
|
||||
You can create **Angular 2.x** and other version projects by following the steps from the official documentation of [Angular](https://angular.io/guide/quickstart)
|
||||
|
||||
For more information regarding the documentation, refer to the official docs for the (CLI)[https://cli.angular.io/] or (Angular documentation)[https://angular.io/docs]
|
||||
*Note : Please refer the Angular documentation for the updated information.*
|
||||
|
||||
@ -3,8 +3,9 @@ title: AngularJS
|
||||
---
|
||||
## AngularJS
|
||||
|
||||
[AngularJS](https://angularjs.org/) is an open source front-end JavaScript framework. AngularJS extends HTML to develop rich and powerful front-ends.
|
||||
It reduces the repetitive use of HTML code. This repetition can be avoided by using the directives provided by AngularJS which saves much time and effort.
|
||||
AngularJS (versions 1.x) is an open source front-end JavaScript framework. AngularJS extends HTML to develop rich and powerful front-ends.
|
||||
It reduces the repetitive use of HTML code. This repetition can be avoided by using the directives provided by AngularJS which saves
|
||||
much time and effort. It is cross platform and used to develop Single Page Web Application (SPWA). AngularJS implements the MVC pattern to separate the logic , presentation and data components. It also uses dependency injection to make use of server-side services in client side applications.
|
||||
|
||||
## AngularJS Expressions
|
||||
- Expressions can be written inside double braces: `{{ expression }}`
|
||||
|
||||
@ -11,40 +11,27 @@ Hybrid apps have many benefits over pure native apps, specifically in terms of p
|
||||
|
||||
Those familiar with web development will find the structure of an Ionic app straightforward. At its core, it’s just a web page running in an native app shell! That means we can use any kind of HTML, CSS, and Javascript we want.
|
||||
|
||||
The bulk of an Ionic app will be written in HTML, Javascript, and CSS. Ionic also uses AngularJS for a lot of the core functionality of the framework.
|
||||
As of Ionic 2, the framwork uses Angular (previously using AngularJS), please see seperate freeCodeCamp guides on Angular.
|
||||
|
||||
### Before we can start playing with Ionic. Let’s prepare our system first:
|
||||
|
||||
```
|
||||
nodeJS and npm
|
||||
Ionic 2
|
||||
Cordova
|
||||
Android Environment (or iOS if you’re working on a MacOS)
|
||||
```
|
||||
|
||||
### First thing first, we need to have Node.js and npm.
|
||||
The easiest way to use Ionic is via its [CLI](https://ionicframework.com/docs/cli/). Those familiar with [Angular's CLI](https://cli.angular.io/) should see some resemblances.
|
||||
|
||||
```
|
||||
sudo apt-get update
|
||||
sudo apt-get install nodejs
|
||||
```
|
||||
|
||||
### Node.js package manager (npm)
|
||||
Prerequisites:
|
||||
|
||||
```
|
||||
sudo apt-get install npm
|
||||
```
|
||||
|
||||
### Ionic 2 and cordova
|
||||
- nodejs / npm
|
||||
- xcode (if wanting to build iOS apps)
|
||||
- Android SDK (if building Android apps)
|
||||
|
||||
```
|
||||
sudo npm install -g ionic cordova
|
||||
```
|
||||
|
||||
### Now sit back and relax, give it some time to finish, it can take several minutes depending on your internet connection.
|
||||
Once that’s done, Let’s start off by generating a new project based on the “blank” template
|
||||
Install ionic CLI:
|
||||
|
||||
```shell
|
||||
npm i -g ionic cordova
|
||||
```
|
||||
|
||||
Create a new project and run in the browser:
|
||||
|
||||
```shell
|
||||
ionic start MyFirstApp blank
|
||||
cd MyFirstApp
|
||||
ionic serve
|
||||
|
||||
Reference in New Issue
Block a user