Angular in 100 Seconds

angular a typescript-based framework for building user interfaces it was developed at google and released in 2016 as the sequel to angularjs as an angular developer you hit the ground running with its extremely powerful cli tool when you generate your initial application it comes pre-configured with routing a testing framework and your favorite style preprocessor in addition the magic ng add command can turn your app into a progressive web app add server-side rendering firebase support and do a whole bunch of other cool stuff but at its core angular is just a component-based ui library i can create a component with the cli and if we go into its typescript file you'll notice the component decorator which makes this typescript class a component any properties on this class are considered reactive state and when their values change the component will re-render the ui for example we can bind the property to html using double braces in the template from there we can add a button that increments this value every time it's clicked we add the event name on the left side in parentheses then an expression on the right side in this case it points to a method in our class each time the button is clicked it calls the method which changes the state and re-renders the ui angular also has a variety of directives for building complex templates use ngf to handle conditional logic or if you have an iterable value use ng4 to loop over it but where angular really excels is handling complexity and one of its primary tools for doing so is called dependency injection when your app grows to hundreds of components you'll likely need a way to share data and functionality between them we can take our component logic here and extract it into a service which can be treated as a global singleton throughout the application now any component that wants to use this state or logic can simply add this class to its constructor the end result is a simple and reliable way to compose complex applications as a developer you can always count on a consistent experience between projects and minimal decision fatigue this has been angular in 100 seconds if you want to see more short videos like this make sure to like and subscribe and check out a ton of advanced angular content on fireship io thanks for watching and i will see you in the next one

Channel: Fireship

Views: 733,251

Keywords: webdev, app development, angular, javascript, js, angular 2, typescript, js framework, 100 seconds of code

Id: Ata9cSC2WpM

Length: 2min 0sec (120 seconds)

Published: Wed Sep 09 2020