React : How to render DOM to browser

Cara 1: Direct render html pada ReactDOM

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
ReactDOM.render(<h1>Render me!</h1>,
document.getElementById('app'));

..

Langkah diatas render tanpa menggunakan variable. Render me! akan di-render dalam id pada index.html.


Cara 2 : Dengan menggunakan variable

import React from 'react';
import ReactDOM from 'react-dom';

let renderMe = <h1> Render me! </h1>;
// Write code here:
ReactDOM.render(renderMe,
document.getElementById('app'));

..

Langkah diatas render menggunakan variable renderMe akan menghasilkan Render me! pada browser tetapi dengan memanggil variable.

Cara 3 : Render variable dalam ReactDOM guna misai {}

import React from 'react';
import ReactDOM from 'react-dom';

const theBestString = 'tralalalala i am da best';

ReactDOM.render(<h1>{theBestString}</h1>, document.getElementById('app'));

..
Boleh panggil variable dengan guna misai

React : Result to 'sometime' kadang-kadang

Guna react untuk dapatkan kebarangkalian option akan keluar. ambil contoh macam menu..
Kadang-kadang hari ni ada ais krim, kadang-kadang takde..

import React from 'react';
import ReactDOM from 'react-dom';

// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

const favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      { !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

ReactDOM.render(
 favoriteFoods, 
 document.getElementById('app')
);

{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }

..akan keluar kadang-kadang dengan kebarangkalian keluar sebanyak 0.5 atau  50%





My Favorite Foods

Sushi Burrito
Rhubarb Pie
Broiled Grapefruit








{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }



..tak keluar.







My Favorite Foods

Sushi Burrito
Rhubarb Pie
Nacho Cheez Straight Out The Jar
Broiled Grapefruit






{ !judgmental && <li>Nacho Cheez Straight Out The Jar</li> }



..keluar.









Result keluar seperti ini kerana adanya variable 


// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

React : Structure, environment and cli

Create folder and add npm init

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop\reactApp>npm init

React using babel ES6 so we need babel to make it functional

C:\Users\username\Desktop\reactApp>npm install -g babel
C:\Users\username\Desktop\reactApp>npm install -g babel-cli

We will use webpack bundler in these tutorial. Let's install webpack and webpack-dev-server.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save

Since we want to use React, we need to install it first. The --save command will add these packages to package.json file.

C:\Users\username\Desktop\reactApp>npm install react --save
C:\Users\username\Desktop\reactApp>npm install react-dom --save

As already mentioned, we will need some babel plugins, so let's install it too.

C:\Users\username\Desktop\reactApp>npm install babel-core
C:\Users\username\Desktop\reactApp>npm install babel-loader
C:\Users\username\Desktop\reactApp>npm install babel-preset-react
C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

Create the Files

Let's create several files that we need. It can be added manually or using the command prompt.

C:\Users\username\Desktop\reactApp>touch index.html
C:\Users\username\Desktop\reactApp>touch App.jsx
C:\Users\username\Desktop\reactApp>touch main.js
C:\Users\username\Desktop\reactApp>touch webpack.config.js

Alternative way to create files that we need

C:\Users\username\Desktop\reactApp>type nul >index.html
C:\Users\username\Desktop\reactApp>type nul >App.jsx
C:\Users\username\Desktop\reactApp>type nul >main.js
C:\Users\username\Desktop\reactApp>type nul >webpack.config.js

Set Compiler, Server and Loaders

Open webpack.config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8080 port. You can choose any port you want.

And lastly, we are setting babel loaders to search for js files, and use es2015and react presets that we installed before.

webpack.config.js

var config = {
   entry: './main.js',
   output: {
      path:'/',
      filename: 'index.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

Open the package.json and delete "test" "echo \"Error: no test specified\" && exit 1" inside "scripts" object. We are deleting this line since we will not do any testing in this tutorial. Let's add the start command instead.

"start": "webpack-dev-server --hot"

Before the above step, it will required webpack-dev-server. To install webpack-dev-server, use the following command.

C:\Users\username\Desktop\reactApp>npm install webpack-dev-server -g

Now, we can use npm start command to start the server. --hot command will add live reload after something is changed inside our files so we don't need to refresh the browser every time we change our code.

https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

Reactjs : Html & Js structure

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Hello World</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
    crossorigin="anonymous">
  </head>
  <body>
    

    <div id='root'></div>
  
   
    <script src="https://fb.me/react-15.0.1.js"></script>
    <script src="https://fb.me/react-dom-15.0.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    
 
    <script src="scripts.js" type="text/babel"></script>

    <script>
    
      const theBestString = 'Tralalala yada yada';

      ReactDOM.render(<h1>{ theBestString }</h1>, document.getElementById('root'));

    </script>
    
  </body>
</html>
 

React : ReactDOM

React Get Element By Id

import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
const myList = ( <ul>
    <li>Mama</li>
    <li>Baba</li>
  </ul>);
ReactDOM.render(
myList,
document.getElementById('app'));

https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a 


Add class in div at reactjs selector

import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
const myDiv = (<div className="big">I AM A BIG DIV</div>);
ReactDOM.render(myDiv, document.getElementById('app'));

ReactDom required self-closing tag if not result might be error on render

const profile = (
  <div>
    <h1>I AM JENKINS</h1>
    <img src="images/jenkins.png" />
    <article>
      I LIKE TO SIT
      <br/>
      JENKINS IS MY NAME
      <br/>
      THANKS HA LOT
    </article>
  </div>
); 

How to add pure javascript inside react jsx?
a: add curly braces

...
ReactDOM.render(<h1>{2+3}</h1>,
         document.getElementById('app')); 

everything inside curly braces treated as regular javascript

How to use variable for javascript inside JSX?
a: Simple as declare variable and call it using curlyBraces

...

const theBestString = 'tralalalala i am da best';
ReactDOM.render(<h1>{ theBestString }</h1>, document.getElementById('app'));

Using Variable to add image or content 

const pics = {
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
};
const panda = (
  <img
    src={pics.panda}
    alt="Lazy Panda" />
);
const owl = (
  <img
    src={pics.owl}
    alt="Unimpressed Owl" />
);
const owlCat = (
  <img
    src={pics.owlCat}
    alt="Ghastly Abomination" />
);

You can save data by declare variable and display by combine it.

const goose = 'https://s3.amazonaws.com/codecademy content/courses/React/react_photo-goose.jpg';
// Declare new variable here:
const gooseImg = ( <img src={goose} /> );
ReactDOM.render(gooseImg,
         document.getElementById('app'));

id app will display an images from variable gooseImg that is an images from link inside variable goose

----------------------------------------------------------

note: ...  equal to
import React from 'react';
import ReactDOM from 'react-dom';

Javascript Source

http://www.jsmadeeasy.com

Javascript : Properties & method

Properties and Methods

The Array object has many properties and methods which help developers to handle arrays easily and efficiently. You can get the value of a property by specifying arrayname.property and the output of a method by specifying arrayname.method().

1. length property --> If you want to know the number of elements in an array, you can use the length property.
2. prototype property --> If you want to add new properties and methods, you can use the prototype property.
3. reverse method --> You can reverse the order of items in an array using reverse method.
4. sort method --> You can sort the items in an array using sort method.
5. pop method --> You can remove the last item of an array using pop method.
6. shift method --> You can remove the first item of an array using shift method.
7. push method --> You can add a value as the last item of array.

<html>
<head>
 <title>Arrays!!!</title>
 <script type="text/javascript">
  var students = new Array("John", "Ann", "Aaron", "Edwin", "Elizabeth");
  Array.prototype.displayItems=function(){
   for (i=0;i<this.length;i++){
    document.write(this[i] + "<br />");
   }
  } 
  document.write("students array<br />");
  students.displayItems();
  document.write("<br />The number of items in students array is " + students.length + "<br />");
  document.write("<br />The SORTED students array<br />");
  students.sort();
  students.displayItems();
  document.write("<br />The REVERSED students array<br />");
  students.reverse();
  students.displayItems();
  document.write("<br />THE students array after REMOVING the LAST item<br />");
  students.pop();
  students.displayItems();
        document.write("<br />THE students array after PUSH<br />");
        students.push("New Stuff");
  students.displayItems();
 </script>
</head>
<body>
</body>
</html>

https://www.guru99.com/learn-arrays-in-javascript.html

Wordpress : Change domain permalink or migrate

Edit wp-config.php

It is possible to set the site URL manually in the wp-config.php file.

Add these two lines to your wp-config.php, where "example.com" is the correct location of your site.

define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');

This is not necessarily the best fix, it's just hardcoding the values into the site itself. You won't be able to edit them on the General settings page anymore when using this method.

https://codex.wordpress.org/Changing_The_Site_URL

Install this plugin

https://wordpress.org/plugins/domain-replace/

Vue CLI3 : Add router

Open folder project cd or using terminal on vs/codeeditor

 vue add router

that all then you should have home and about router as example

https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project

Vuejs : Component Structure

<template>
  <h1>popalihwey {{ title }} {{ number }}</h1>
</template>

<script>
export default {
  data() {
      return {
          title:'Hafiz',
          number : '0166759887'
      }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 On App.vue must import to use

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Wadup></Wadup>  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Wadup from './components/Wadup.vue'

export default {
  name: 'app',
  components: {
    HelloWorld, Wadup  }
}
</script>
<style>

</style>

Must add this script to start use component in any pages

<script>

import HelloWorld from '@/components/HelloWorld.vue'
import Wadup from '@/components/Wadup.vue'

export default {
  name: 'home',
  components: {
    HelloWorld,
    Wadup,
  }
}
</script>

Already declare? start calling it by using <HelloWorld/> and <Wadup/>

headwayapp.co : Create notification for changes

Easiest way to keep your customers in the loop about your product.

Every update that you can share with your users, you should.They will love you for this, we promise.

https://headwayapp.co

Javascript: getElementByClassName change all class from js

<h2 class="title">This text will change</h2>
<script>
var x = document.getElementsByClassName("title");
var i;
for (i = 0; i < x.length; i++) {
    x[i].innerHTML= "This text has changed";
}
</script>

JQUERY : editable HTML 5 save at local storage

//editable cookies enable
    $(function(){
      var edit = document.getElementById('your-id');
      $(edit).blur(function(){
        localStorage.setItem('todoData', this.innerHTML);
      });
      //when the page loads
      if ( localStorage.getItem('todoData')){
        edit.innerHTML = localStorage.getItem('todoData');
      }
    })

<p id="your-id" contenteditable="true"> Ubah ayat ni dan ia save kat browser </p>

CONS 
satu id boleh simpan 1 satu data.. maksudnya, kalau id ada ditempat lain.. data pada id yang pertama sahaja akan boleh diubah

https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520

Javascript : manipulate id DOM using javascript (cool!)

<script>
document.getElementById("id-goes-here").innerHTML = `<p> here </p>`;
</script>

add this code on .js document or add it at the bottom of <body>

Navbar hide or fade when scroll




<style>

#navbar-scroll {
  transition: top 0.5s; /* Transition effect when sliding down (and up) */
}

</style>


<body>
<script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar-scroll").style.top = "0";
      } else {
        document.getElementById("navbar-scroll").style.top = "-50px";
      }
      prevScrollpos = currentScrollPos;
    }

</script>
</body>

Vue 3 Todo code example

<template>

    <div class="fiftycent card" id="tododiv">

            <div class="card-header">
                    CREATE TODO LIST
            </div>

        <ol>
            <li v-for="todo in todos" :key="todo">
                <div class="margin-text"></div>

                <input v-model="todo.done" type="checkbox">  <!-- v-model interact dengan js-->

                <span >{{todo.ayat}}</span> <!-- span ditaruk semasa nak letak checkbox-->
                <!-- refer item .text-->

            </li>
        </ol>

        <!-- input model -->
        <input  v-model='newTodo'
                v-on:keydown.enter='addTodo()'
                type='text'  class="text-box" placeholder="Type something here" > <!--v-on enter to addTodo -->

        <div class="btn-group" role="group" aria-label="Group Button">
                <button v-on:click='addTodo()'
                 type="button" class="btn fm-button">Add</button>

                <button v-on:click='reverseList()'
                type="button" class="btn fm-button-dark">Reverse</button>

        </div>

    </div><!-- function semua dalam div refer id kerja dalam js -->

</template>

<script>
export default {
  data() {
    return {
      // data mula disini
      todos: [
        {
          ayat: "Belajar HTML",
          done: true // done adalah checkbox
        },
        {
          ayat: " belajar Css",
          done: false // ayat: adalah item
        },
        {
          ayat: " belajar Javascript" // ayat: adalah item
        }
      ]
    };
  }, // data default tamat disini

  methods: {
    //add method sini
    addTodo() {
      //add function sini
      this.todos.push({
        //this. refer addTodo
        ayat: this.newTodo, // refer array item di atas
        done: false // item checkbox + boolean condition
      });
      this.newTodo = "";
    },
    reverseList() {
      this.todos.reverse();
    }
  }
}; //method tamat disini
</script>

<style>

</style>

Migration Vue 1 to latest

https://github.com/vuejs/vue-migration-helper

Pure Javascript : document.getElement

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Finding elements by ID</title>
    </head>
    <body>

        <h1 id="heading">All about dogs</h1>
        
        <p>The domestic <span class="animal">dog</span> is known as man's best friend. The <span class="animal">dog</span> was the first domesticated animal and has been widely kept as a working, hunting, and pet companion. According to recent coarse estimates, there are currently between 700 million and one billion <span class="animal">dog</span>s, making them the most abundant predators in the world. <a href="http://en.wikipedia.org/wiki/Dog">Read more on Wikipedia</a>.</p>
        
        <img src="https://www.kasandbox.org/programming-images/animals/dog_sleeping-puppy.png" height="150" alt="Sleeping puppy">
        
        <img src="https://www.kasandbox.org/programming-images/animals/dogs_collies.png" height="150" alt="Dogs running">
        
        <script>

        var headingEl = document.getElementById("heading");
        console.log(headingEl);
        headingEl.innerHTML="all about cat"

        var nameEls = document.getElementsByClassName ("animal");
        console.log(nameEls[0]);
            for (var i = 0; i < nameEls.length; i++) {
                nameEls[i].innerHTML = "cat";
            }
        </script>
    </body>
</html>

... //mhz

add for bawah document.getElementsByClassName("animal"); untuk dapatkan semua class yang ada tag animal

var nameEls = document.getElementsByClassName("animal");
            console.log(nameEls);
            for (var i = 0; i < nameEls.length; i++) {
                nameEls[i].innerHTML = "cat";
            }

...// mhz

<body>

        
        <div class="name-tag">
            <h1>Hello, my name is...</h1>
            <p>Grace Hopper</p>
        </div>
        
        <div class="name-tag">
            <h1>Hello, my name is...</h1>
            <p>Alan Turing</p>
        </div>
        
        <script>
       var namaKuEls = document.getElementsByTagName("h1");
    
        for (var i = 0; i < namaKuEls.length; i++) {
                namaKuEls[i].innerHTML = "Muhaza";
            }
        </script>
    </body>

//rujuk :  https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-access/p/finding-multiple-dom-elements-by-tag-or-class-name

Vue 3 : How to start making components

1. create component.vue and add this code structure inside it

<template>

<div>

</div>

</template>

<script>

export default {

data(){

return{

}

},

}

</script>

2. Looking add main.js and declare for the existence of the component

import Vue from 'vue'

import App from './App.vue'

import component from './components/component.vue'

Vue.component('component', component);

Vue.config.productionTip = false

new Vue({

render: h => h(App)

}).$mount('#app')

3. Looking for app.vue and add component selector and done!

<template>

<div">

<component></component>

</div>

<waddup></waddup>

</div>

</template>

<script>

export default {

data(){

return{

}

},

}

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

Vue 3 Rules of Directives

Vue 3 not the same as vue 1. It becoming much simpler however it will us spending time to search for solution.

here the new style how to write v-if and else

<div v-if ="seen">this should seen!</div>

<div v-else>Hei you All!</div>

for v-for, it required key

<li v-for="front in fronts" :key="front">

Vue CLI V2 And V3

Looking at vue-cli repository I see two different ways of scaffolding vue projects.

The v3 (beta) version, installed as npm install -g @vue/cli, creates projects using the following command:

vue create my-project

While the version 2.9.x, available at master branch, is installed as npm install -g vue-cli and it allows projects scaffolding with the following:

vue init <template-name> <project-name>

for example:

vue init webpack my-project

So, in your scenario, for v3 version you should use: vue create test-app.

Here you can find further information.

Building and Extract APK using APKtool

ibotpeaches.github.io/Apktool

A tool for reverse engineering 3rd party, closed, binary Android apps. It can decode resources to nearly original form and rebuild them after making some modifications. It also makes working with an app easier because of the project like file structure and automation of some repetitive tasks like building apk, etc.

It is NOT intended for piracy and other non-legal uses. It could be used for localizing, adding some features or support for custom platforms, analyzing applications and much more.

Extract apk and rebuild

Reading Javascript #1

Variable & array

[ 'item 1', 'item 2', 'item 3' ] ← this is array item is value

var ← this refering to variable

var todos ← this is the name of variable

var todos = [ 'item 1', 'item 2', 'item 3' ] ← this complete variable how it should look like.

variable contain name and array. Array is a data

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

console.log

console.log('hello there') ← this is console.log, it show the text print
console.log('hello there', 'muhaza')  ← this is how to combine 2 text

'string' 'value' inside of this '' can be describe as string or value.

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

Combine Variable with Console.log

var todos = [ 'item 1', 'item 2', 'item 3' ] ← declare var first

console.log(todos) ← call it by using console.log

Declare and Call terms for my personal note

Variable named todos declared  as [ 'item 1', 'item 2', 'item 3' ] values now its complete as data

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

to print as text or variable 

console.log(todos) ← this will print as variable

console.log('buat') ← this will be print as text

console.log('buat', todos) ← this will be print text and variable

'buat' is text value, todos is var name that have array with variable data.

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

Problem :  Now its already declare var todos have 3 array item. How to add more?

-------------------------------------------------------------------------------------------------------

.push to add more array on declared var

todos.push('item 4') ← add .push after array name and set new array

using () not using []

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

Problem :  I have added array item and i want to delete it..

-------------------------------------------------------------------------------------------------------

1. should notice which item inside array you want to delete?

2. you should know that computer start counting from 0

todos[0] ← call the var name and using [] call first item inside array.

todos[1] ← call the var name and using [] call second item inside array.

todos[0] = 'item change' ←  add = and declare new item or value

Result gonna be by type todos on console

before

["item 1", "item 2", "item 3", "item 4"] 

after

["item change", "item 2", "item 3", "item 4"] 

-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------

Remove .html / .php from url

create .htaccess and copy paste code below

RewriteEngine on
RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^ %{REQUEST_URI}.html [NC,L]
RewriteEngine on
RewriteCond %{THE_REQUEST} /([^.]+)\.php [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^ %{REQUEST_URI}.php [NC,L]

next save it on root folder same with index. Now html no longer needed.


RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php [NC,L]

CSS Target to replace JQuery

Ok.. I just found :target on css.. freaking out!

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal
https://www.w3schools.com/cssref/sel_target.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Add animation on it to make it life

https://css-tricks.com/on-target/

here the full code of mine

https://codepad.co/snippet/WoBwuMB7

NPM Shown err to much

npm cache clean --force

bye bye

npm install -g npm@latest
npm cache verify
npm i 

Now lets create new json package

npm init --yes

Remove rubbish package inside dependency

npm uninstall rubbish ← this name of the package you want to remove

Now VUEjs can be develop as App by using NativeScript!

https://docs.nativescript.org/vuejs/nativescript-vuejs
https://nativescript-vue.org/en/docs/getting-started/quick-start/

Gosh! This is so cool, why? because I could read vue.js clearly.. now I can make apps using vue!

https://play.nativescript.org/?template=play-vue&id=jy01gX
https://www.youtube.com/watch?v=LDqsuLQqLrQ

Change divi sidebar from right to left

.et_right_sidebar #main-content .container::before{
left: 29% !important;
right: auto !important;
}

body #page-container #left-area{
float: right;
padding-left: 3%;
padding-right: 0;
}

body #page-container #sidebar{
padding-left: 0;
padding-right: 3%;
float: left;
}

Angular : Manually Routing

Step 1: Make sure you have at least 2 Components

Syarat sah untuk bina routing adalah

• ada sekurang2nya 2 component
• guna cli dibawah untuk generate component baru

ng generate component about

ng g c about 

Step 2: Create an app.router.ts file

Kemudian dengan mengunakan editor ( VS e.g ) tepek code dibawah

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

Tukarkan code2 ini dengan component anda

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component'; 

Ini pula proses selepas import iaitu tentukan kemana component tu hendak dibawa

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent } 

Step 3: Import the router to app.module.ts

Dah buat syarat tu, untuk membolehkan projek berjaya di build mesti dapat kebenaran dari module.ts

import { routes } from './app.router';

letak kat atas

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes
  ], 

 Jangan lupa letak routes kat bahagian imports, kalau tak dia macam dah siap kerja tapi tak hantar kat lecturer.

Step 4: Add <router-outlet></router-outlet>

di app.component.html, letak:

<router-outlet></router-outlet>

Step 5: Add the routerLink directive

mula letak link kini bukan lagi a href di angular kita guna routerLink kalau dah routing

 <ul class="nav navbar-nav">
  <li>
    <a routerLink="about">About</a>
  </li>
  <li>
    <a routerLink="services">Services</a>
  </li>
</ul>

Step 6: Ensure <base href="/"> is in index.html

Kat index jangan lupa letak <base href="/">

dia mewakili routerLink..

Angular 6 : Project with scss & routing

ng new projName --style=scss --routing

this CLI will automatic add routing and scss