0

I've started learning Angular JS. I do not understand how Angular is working on the inside. E.g. Let's consider the w3schools' first example: 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

Questions:

  1. How do I create an attribute myng-myapp with plain javascript?

  2. What is {{}} in html language? How is the content inside these converted into text? How do I create the same effect with plain javascript. That is I do not use angularjs library and then I insert {{name}} in the html file. Now in the script tags I define var name = "Bob". Now how would {{name}} be converted to Bob?

Edit: This is how my question is not a duplicate of the linked one:

  1. My question doesn't ask about compiler, controller, prelink and post link.

  2. My question doesn't ask about How to declare the various functions? What is the difference between a source template and an instance template? In which order the directive functions are executed? What else happens between these function calls?

  3. The linked question doesn't explain how to create custom attributes with plain javascript.

  4. It doesn't explain what is {{}} in html or css.

If you think the linked question answer any of my questions you are welcome show that portion and i will be happy to delete my question.

Thank you.

user31782
  • 7,087
  • 14
  • 68
  • 143
  • 5
    Come on, open dev guide and read. You really expect someone to explain it here? - what you are asking is *huge*. https://docs.angularjs.org/guide – dfsq Jun 24 '16 at 08:24
  • @dfsq Is Angular 1 and Angular 2 same in core concepts? Because The official docs don't explain Angular2 using javascript; they are explaining with typescript. – user31782 Jun 24 '16 at 08:26
  • You also might be interested in this: http://stackoverflow.com/questions/24615103/angular-directives-when-and-how-to-use-compile-controller-pre-link-and-post But there is already a lot of info on SO and other sources. – ArBro Jun 24 '16 at 08:28
  • TypeScript compiles to JavaScript, it's the same thing in the end. The answer in a nutshell is that Angular works *a lot* with the DOM; querying for elements, attributes, inspecting the text nodes etc. etc. You can read it all in the Angular source code. – deceze Jun 24 '16 at 08:29
  • 3
    Basically they just find and replace shit, but really well. – Glubus Jun 24 '16 at 08:32
  • 1
    @user31782 I would say that Angular 2 has little in common with AngularJS (except for name). Some of the concepts are similar but not that much actually. In order to use it effectively you will need to get comfortable with TypeScript - which is not that hard, providing that you already comfortable with core Javascript, including latest standards, like ES2015 (ES6). – dfsq Jun 24 '16 at 08:37
  • @dfsq Does typescript work in browser as javascript does? – user31782 Jun 24 '16 at 08:38
  • No, Typescript (as well as ES2015 - still) needs to be transpiled to ES5. Which adds complexity because you will need to learn many other tools. – dfsq Jun 24 '16 at 09:07
  • What do you mean when you say "plain javascript"? Do you mean the difference between javascript and typescript _or_ javascript without any libraries like angular? – E. Mourits Jun 26 '16 at 08:20
  • @E.Mourits I mean javascript without any libraries like angular or jquery. – user31782 Jun 26 '16 at 09:21

1 Answers1

1

Answers to your questions:

  1. You can't create that with plain javascript. Every attribute that starts with ng- is interpreted by Angular. It is not part of the HTML, CSS or javascripts standards.
  2. Same answer as 1. {{}} is not part of the HTML standard.

Think of Angular (or any other javascript framework like jQuery) as an add-on or extension (like with Chrome) of HTML, CSS or javascript.

E. Mourits
  • 295
  • 2
  • 11
  • Then does the creators of angular js use typescript to extend html and javascript language for browsers? Does angular make new things in html and JavaScript? – user31782 Jun 26 '16 at 12:19
  • TypeScript _compiles_ into javascript. Javascript is a **non-typed** language, meaning I don't have to specify if something is an integer, string, boolean, etc. TypeScript is a, you guessed it, **typed** language. The _makers_ (Google btw) of Angular made it to extend the features of html and javascript. Making it easier for you and me to make cool, responsive websites. – E. Mourits Jun 26 '16 at 16:36
  • Actually you can set it via Javascript using `Element.setAttribute()`. If you think about it. Angular is written in JS as well (well really Typescript, which compiles to JS), so it's not like it has magical abilities. – Antimony Dec 07 '17 at 17:58