How to render Scheduler in AngularJS with Gulp package?

Follow the below guidelines to run the AngularJS controls using gulp package.

Step 1: Create a new directory and configure the gulp setup for it using command prompt. To create “gulpfile.js”, make use of the below steps.

1. Install Node. (Node JS)
2. Install Gulp by using this command “npm install -g gulp”.
3. Download the required gulp and its plugins to your project by specifying the plugins that you are about to use in “package.json”.

{

"devDependencies": {

  "gulp": "latest",

  "gulp-util": "latest",

  "gulp-sass": "latest",

  "gulp-coffee": "latest",

  "gulp-uglify": "latest",

  "gulp-concat": "latest",

  "gulp-connect": "latest"

  }

}

4. Now execute the command “npm install” in command prompt under your project directory, so that the “gulpfile.js” will be created.

Step 3: After creating the above files, the “syncfusion-javascript” package needs to be added into package.json file.

{

                "dependencies": {

                “angular”: "latest",

        "syncfusion-javascript": "specify latest version"

                }

}

Step 4: Now create an HTML file “index.html” and render the needed Syncfusion components within it. For example, the Schedule control initialization is as follows:

<div ng-controller=”ScheduleCtrl”>

                <ej-schedule id=”Schedule1” e-width=”100%” e-height=”525px”></ej-schedule>

</div>

Step 5: After creating “index.html” file, the scripts and themes path needs to be referred from the corresponding directory.

1. The “syncfusion-javascript” packages are available inside the node_modules directory.

Step 6: Finally execute the below commands to run the sample with gulp.

1. Install npm packages by using this command “npm install”.
2. Ensure that the Gulp packages are installed in your system and if not installed, use this command “npm install gulp -g”.
3. Now clean your project directory by using gulp command – “gulp clean”.
4. Now copy the scripts and theme references by using gulp command – “gulp copy”.
5. Finally run the “gulp dev” command to run the project.

We have prepared the sample in AngularJS with gulp rendering, which can be download from here.