Page 3 of 3

Angularjs simple front-end apps using ngRoute

Angularjs is very flexible for Single Page Application(SPA). This post explains you that how we can perform navigating between one view to another view using ngRoute module and used Bootstrap for layouts. Please go to this post If you are interested this demo using ui-router module.

Sample:

http://www.amasik.com/demo/angularjs/front-end-ng-route/index.html

Module Source: https://code.angularjs.org/1.3.2/angular-route.min.js

Dependent Module: ngRoute

Router Provider:

Default View Config:

Router Config:

View Directive: ng-view

Templates: Used In-line templates home.html, projects.html..etc., (Refer code)

Link Directive : href=”#/home”  (use html href directly)

Source Code:

HTML

js

 

Angularjs simple front-end apps using ui-router

Angularjs is flexible for Single Page Application(SPA). This post explains you that how we can perform navigating between one view to another view using ui-router module and Bootstrap for layouts. Please go to this post If you are interested this demo using ngRoute module.

Sample:

http://www.amasik.com/demo/angularjs/front-end-ui-router/index.html

Module Source: http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js

Dependent Module: ui.router

Router Provider:

Default View Config:

Router Config:

View Directive: ui-view

Templates: Used In-line templates home.html, projects.html..etc., (Refer code)

Link Directive : ui-sref=”home”  (here ‘home’ is a state, not url)

Full Source:

HTML

JS

 

Angularjs ngRoute vs ui-router

Router is playing important role in Single Page Application (SPA). It is getting & applying the Partials/Views/Templates into corresponding places. Also, using this technique, navigation between  one view to another view is performed.

ngRoute is a angular core module which is good for basic scenarios. I believe that they will add more powerful features in upcoming releases.

URL: https://docs.angularjs.org/api/ngRoute

> Ui-router is a contributed module which is overcome the problems of ngRoute. Mainly Nested/Complex views.

URL: https://github.com/angular-ui/ui-router

Some of the difference between ui-router and ngRoute

Open in new tab for better results:

http://www.amasik.com/demo/angularjs/uiRouter-vs-ngroute/index.html

Sample  App:

ngRoute:

http://www.amasik.com/angularjs-simple-front-end-apps-using-ngroute/

ui-router:

http://www.amasik.com/angularjs-simple-front-end-apps-using-ui-router/

Angularjs directive scopes

The significance feature of Angularjs is Directive. Angularjs is HTML enhanced for web apps. Means, developer can introduce new HTML element (eg: <datatable>) or new attribute ( goTo=””) whenever needed and write a script for their behavior. We should know about the scope of directives. So that we can write Directive efficiently.

I assume that you have some prior knowledge regarding directive. This post explains the type of scope can be used for directives.

1. scope: false (Default)

This is default behavior. you can get the parent scope inside directive and this scope will be act as two-way data binding. Means, if you change the scope inside directive, then it will be changed in parent.

Example: (Check country scope/model)

Code:

2. scope: true (Inherit scope)

You can get the parent scope inside directive and this scope will be act as one-way data binding. Means, if you change the scope inside directive, then it will not be changed in parent.

Example: (Check country scope/model)

Code:

 

3. scope:{} (Isolated scope)

You can pass particular scopes inside directive through attributes and you may decide whether these scopes will be act as two-way data binding (=) or one-way data binding (@).

Example: (two-way data binding) (Check country scope/model)

Code:

 

Example: (one-way data binding) (Check country scope/model)

Code:

 

PDO right way to execute queries

We can execute queries in the following ways using PDO . I preferred to use prepare method.
> Query Method
> Execute Method
> Prepare Method

Here we can take an example to delete 3rd record from departments table.

Establish a DB connection.
$conn = new PDO(‘mysql:host=localhost;dbname=demo’, ‘username’, ‘password’);

Query Method
Syntax: $conn->query();
Parameter: SQL Statement
Success: PDOStatement
Failure: false
Example:

Dis-advantage:
We need to care about SQL injection attacks. means if $id contains any vulnerability.

Execute Method
Syntax: $conn->exec();
Parameter: SQL Statement
Success: Number of rows
Failure: false
Example:

Dis-advantage:
We need to care about SQL injection attacks. means if $id contains any vulnerability.

Prepare Method
Syntax: $conn->prepare();
Parameter: SQL Statement
Success: PDOStatement
Failure: false
Example:

Advantages:
Here we can not pass the value directly in SQL statement instead use named parameters (:name or ?). It prevent SQL injection attacks

Use PDO instead of mysqli & mysql extensions

Mysql Extension
Do not use mysql functions for your projects. it is already deprecated from PHP 5.5.0 and it will be removed in future version.
(for eg:)
mysql_connect
mysql_select_db
mysql_close

Mysqli Extension
We can use mysqli functions if you are strict with mysql DB. This syntax not supports other DB.

PDO (PHP Data Objects)
Always, we should choose latest one. So that we are in the right direction. PDO is a latest approach to perform database operations which was introduced from PHP 5.
> It works through PDO drivers and currently it supports number of major databases (Mysql, Postgres, Sqllite..etc.,).
> You don’t need to change your syntax in code if you are planning to switch one DB to another DB
> You don’t need to write 2 different syntax’s if you are using 2 different DB in your projects
> I like to use prepared statement. So that we don’t care a bout SQL injection attacks. No need to filter every input using PHP functions. also, please check this topic “PDO right way to execute queries

Do not choose YUI

First of all, still I am a fan of YUI libraries. It is an open source client-side library and provides rich set of UI  components (like Datatable, Uploader..etc.,) and it was actively maintained by YUI team. but now  YUI announced and  decided to stop all new developments and will do bug fixes only if anything critical to YUI properties. So I will not choose/recommend YUI for coming  projects.

Below is a important points from YUI announcement.

The consequence of this evolution in web technologies is that large JavaScript libraries, such as YUI, have been receiving less attention from the community. Many developers today look at large JavaScript libraries as walled gardens they don’t want to be locked into. As a result, the number of YUI issues and pull requests we’ve received in the past couple of years has slowly reduced to a trickle. Most core YUI modules do not have active maintainers, relying instead on a slow stream of occasional patches from external contributors. Few reviewers still have the time to ensure that the patches submitted are reviewed quickly and thoroughly.

Therefore, we have made the difficult decision to immediately stop all new development on YUI in order to focus our efforts on this new technology landscape. This means that, going forward, new YUI releases will likely be few and far between, and will only contain targeted fixes that are absolutely critical to Yahoo properties.

© 2019 Asik Blog

Theme by Anders NorenUp ↑