)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to render Scheduler in AngularJS with Gulp package?

Platform: jQuery |
Control: ejSchedule |
Published Date: May 30, 2017 |
Last Revised Date: May 30, 2017

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"

  }

}

 

  1. Now execute the command “npm installin 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 fileindex.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.

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon